博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack优化——定义“生产”环境
阅读量:6989 次
发布时间:2019-06-27

本文共 672 字,大约阅读时间需要 2 分钟。

背景与问题

为了解决开发环境和生产环境之间的差异,采用webpack打包前端项目时,会分离生产环境和开发环境的配置。我们尽可能的在生产环境的配置中提高生产版本代码的效率(压缩,混淆),但是,我们引用的第三方库也有生产环境和开发环境的区分,如同jQuery有正常版和min版,那么要怎么配置,才能让我们所引用的第三方库也是生产版本呢?

概念

我们讨论的范围是引入的node模块,相关代码大致如下:

webpack优化——定义“生产”环境

node中有一个潜规则,模块以全局的process.env.NODE_ENV是否为production区分生产环境,webpack可以定义同样的全局变量,让第三方node模块知道要在生产环境中进行构建。

方案

const webpack = require('webpack');module.exports = {        plugins: [        new webpack.DefinePlugin({            'process.env': {                'NODE_ENV': JSON.stringify('production')            }        })    ]}

效果对比

webpack优化——定义“生产”环境

优化建议

该优化方案最坏就是不起优化作用,但是可能带来的好处是很大的。因为我们都知道前端的js库,生产版本和开发版本的size的差别是很大的,尤其是一些明确说自己是小巧型的库。

建议:生产环境一定都加上。

转载于:https://blog.51cto.com/dkjc007/2053922

你可能感兴趣的文章
HBase 事务支持 Omid
查看>>
《程序员的呐喊》一一1.3 作者手记:名词王国里的执行
查看>>
微软开始为厂商提供 SQL Server 2014 OTM
查看>>
页面中iframe中嵌入一个跨域的页面,让这个页面按照嵌入的页面宽高大小显示的方式;iframe嵌套的页面不可以编辑的问题解决方案...
查看>>
维护 VS Code 开源项目背后的那些事情
查看>>
亿级用户平台的大数据实践
查看>>
《IPv6精髓(第2版)》——3.5 全局路由前缀
查看>>
Parse SDK:里面到底有什么宝贝?
查看>>
《Java遗传算法编程》—— 2.8 交叉实现
查看>>
《实用软件架构:从系统环境到软件部署 》——导读
查看>>
机器学习领域的几种主要学习方式
查看>>
数据库存储时间的时区问题
查看>>
《Python Cookbook(第2版)中文版》——1.16 替换字符串中的子串
查看>>
《Python Cookbook(第2版)中文版》——1.15 扩展和压缩制表符
查看>>
使用DNSCrypt来加密您与OpenDNS之间的通信
查看>>
支付宝体验设计精髓
查看>>
如何在 Linux 上永久挂载一个 Windows 共享
查看>>
《MapReduce 2.0源码分析与编程实战》一2.2 数据操作
查看>>
springboot(七):springboot+mybatis多数据源最简解决方案
查看>>
《Unity着色器和屏幕特效开发秘笈(原书第2版)》一2.3 使用包装数组
查看>>