webpack坑之二

之前没有注意webpack打包后的文件的大小,直到某次用firebug无意中发现,天呐,居然有1MB+,这么大的文件在线上项目显然是不可以的,于是开始研究如何压缩文件。

文件压缩

  • Uglify
    webpack自带了Uglify插件,通过插件我们可以对代码进行压缩合并并去除注释,请看代码:
plugins: [
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false, 
            },
            compress: {
                warnings: false
            }
        })
    ],

其中output是删除注释的

合并共同依赖

  • CommonsChunkPlugin
    同样在plugins中设置
plugins: [
        new webpack.optimize.CommonsChunkPlugin('vender','vender.js')
    ]

在entry中设置:

entry: {
        vender:['react','react-dom']
}

entry中的key是plugins中的文件名

结果

通过这两种方法,文件有效压缩到了7KB,vender大小为211KB,应该还有其他办法,继续探索中...

Tips: UglifyJsPlugin中的comments会把作者信息一并删除,为了压缩体积不得不这么做,因此将作者信息放在单独文件中统一声明

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,715评论 7 110
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,227评论 7 35
  • 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过...
    阳阳阳一堆阳阅读 3,336评论 0 5
  • webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert阅读 6,501评论 2 71
  • 《世法哲言》(三十四) 知其所错而弗正之是为大过,持错随行,故弗愿弃之弊,由是步之不前,故首必于改错之道则然步进。...
    柏小林阅读 690评论 0 2