webpack-提速优化小方案

1：通过externals配置来提取常用库

2：利用DllPlugin和DllReferencePlugin预编译资源模块,通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

3：使用Happypack 实现多线程加速编译,要注意的第一点是，它对file-loader和url-loader支持不好，所以这两个loader就不需要换成happypack了，其他loader可以类似地换一下

4：使用Tree-shaking和Scope Hoisting来剔除多余代码

5：使用fast-sass-loader代替sass-loader

6：babel-loader开启缓存

babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率

可以加上cacheDirectory参数或使用 transform-runtime 插件试试

// webpack.config.js

use: [{

loader: 'babel-loader',

options: {

cacheDirectory: true

}]

// .bablerc

{

"presets": [

    "env",

    "react"

],

"plugins": ["transform-runtime"]

}

7：不需要打包编译的插件库换成全局"script"标签引入的方式

比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时

可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量

use: [{

loader: 'expose-loader',

options: '\$'

}, {

loader: 'expose-loader',

options: 'jQuery'

}]

externals: {

jquery: 'jQuery'

},

new webpack.ProvidePlugin({

\$: 'jquery',

jQuery: 'jquery',

'window.jQuery': 'jquery'

}),

8：webpack 打包会搜索路径，为了提高搜索路径的耗时，有的可以写成绝对路径以纯模块名来引入的可以加上一些目录路径

还可以善于用下resolve alias别名 这个字段来配置

另外exclude等的配置，避免多余查找的文件，比如使用babel别忘剔除不需要遍历