以上优化点只须要在构建用于临盆情况代码的时刻才应用，在开辟情况时最好封闭因为它们很耗时。

webpack是当下最风行的js打包对象，这得益于网页应用日益复杂和js模块化的风行。webpack2增长了一些新特点也正式宣布了一段时光，是时刻告诉大年夜家若何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开辟体验。

优化输出

打包结不雅更小可以让网页打开速度更快以及简约宽带。可以经由过程这以下几点做到

紧缩css

css-loader 在webpack2里默认是没有开启紧缩的，最后生成的css文件里有很多空格和tab，经由过程设备

css-loader?minimize参数可以开启紧缩输出最小的css。css的紧缩实际是是经由过程cssnano实现的。

tree-shaking

tree-shaking 是指借助es6 import export 语犯境态性的特点来删掉落export然则没有import过的器械。要让tree-shaking工作须要留意以下几点：

• 设备babel让它在编译转化es6代码时不把import export转换为cmd的module.export，设备如下：

"presets": [ 
 
    [ 
 
      "es2015", 
 
      { 
 
        "modules": false 
 
      } 
 
    ] 
 
]  

• 大年夜多半分布到npm的库里的代码都是es5的，然则也有部分库(redux,react-router等等)开端支撑tree-shaking。这些库宣布到npm里的代码即包含es5的又包含全采取了es6 import export 语法的代码。

├── es 
 
│   └── utils 
 
├── lib 
 
│   └── utils  

main": "lib/index.js", 
 
"jsnext:main": "es/index.js",  

这是指这个库的人口文件的地位，所以要让webpack去攫取es目次下的代码须要应用jsnext:main字段设备的人口，要做到这点webpack须要如许设备：

module.exports = { 
 
resolve: { 
 
            mainFields: ['jsnext:main','main'], 
 
        } 
 
};  

这会让webpack先应用jsnext:main字段，在没有时应用main字段。如许就可以优化支撑tree-shaking的库。

优化 UglifyJsPlugin

webpack --optimize-minimize 选项会开启 UglifyJsPlugin来紧缩输出的js，然则默认的UglifyJsPlugin设备并没有把代码紧缩到最小输出的js里照样有注释和空格，须要覆盖默认的设备：

new UglifyJsPlugin({ 
 
    // 最紧凑的输出 
 
    beautify: false, 
 
    // 删除所有的注释 
 
    comments: false	
			
 1/6    1 2 3 4 5 6 下一页 尾页
	
			

　　推荐阅读
　　CSS进阶：试试酷炫的3D视角
写这篇文┞仿的启事是因为看到了这个页面：https://shakeduang.nuomi.com/campus/index.html?from=timeline&isappinstalled=1(移动端页面，应用模仿器不雅看)控制 control 层，进入到圆柱画面内应用 CSS3 完成的 3D >>>详细阅读


本文标题：webpack2终极优化
地址：http://www.17bianji.com/lsqh/36159.html
 1/2    1