webpack2终极优化

compress: {

// 在UglifyJs删除没有效到的代码时不输出警告

warnings: false,

// 删除所有的 `console` 语句

// 还可以兼容ie浏览器

drop_console: true,

// 内嵌定义了然则只用到一次的变量

collapse_vars: true,

// 提掏出出现多次然则没有定义成变量去引用的静态值

reduce_vars: true,

}

})

很多库里(比如react)有部分代码是如许的：

if(process.env.NODE_ENV !== 'production'){ 
 
// 不是临盆情况才须要用到的代码，比如控制台里看到的警告     
 
}

在情况变量 NODE_ENV 等于 production 的时刻UglifyJs会认为if语句里的是逝世代码在紧缩代码时删掉落。

CommonsChunkPlugin可以提掏出多个代码块都依附的模块形成一个零丁的模块。要发挥CommonsChunkPlugin的感化还须要浏览器缓存机制的合营。在应用有多个页面的场景下提掏出所有页面公共的代码削减单个页面的代码，在不合页面之间切换时所有页面公共的代码之前被加载过而不必从新加载。这个办法可以异常有效的晋升应用机能。

在临盆情况按照文件内容md5打hash

知道以上道理后我们还可以进一步优化：应用CommonsChunkPlugin提掏出应用页面都依附的基本运行情况。比如对于最常见的react体系你可以抽出基本库react react-dom redux react-redux到一个零丁的文件而不是和其它文件放在一路打包为一个文件，如许做的好处是只要你不进级他们的版本这个文件永远不会被刷新。如不雅你把这些基本库和营业代码打包在一个文件琅绫强次修改营业代码都邑导致浏览看重复下载这些包含基本库的代码。以上的设备为：

// vender.js 文件抽离基本库到零丁的一个文件里防止跟随营业代码被刷新 
 
// 所有页面都依附的第三方库 
 
// react基本 
 
import 'react'; 
 
import 'react-dom'; 
 
import 'react-redux'; 
 
// redux基本 
 
import 'redux'; 
 
import 'redux-thunk';

// webpack设备 
 
{ 
 
  entry: { 
 
    vendor: './path/to/vendor.js', 
 
  }, 
 
}

DedupePlugin 和 OccurrenceOrderPlugin

在webpack1里经常会应用 DedupePlugin 插件来清除反复的模块以及应用 OccurrenceOrderPlugin 插件让被依附次数更高的模靠得住前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。

2/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