webpack优化——定义“生产”环境-创新互联

背景与问题

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

创新互联从2013年开始,先为集贤等服务建站,集贤等地企业,进行企业商务咨询服务。为集贤企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

概念

我们讨论的范围是引入的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的差别是很大的,尤其是一些明确说自己是小巧型的库。

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

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


当前名称:webpack优化——定义“生产”环境-创新互联
网站路径:http://myzitong.com/article/hgpjh.html