webpack优化

0、调试

webpack --config file --colors --profile --display-modules

--colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
--profile 输出性能数据，可以看到每一步的耗时
--display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

1、添加 alise

主要是 node_modules 部分。可以加快查询速度。（感觉无所谓）

2、避免比不要的babel

对于很多的 npm 包来说，他们完全没有经过 babel 的必要（成熟的 npm 包会在发布前将自己 es5，甚至 es3 化），让这些包通过 babel 会带来巨大的性能负担，毕竟 babel6 要经过几十个插件的处理，虽然 babel-loader 强大，但能者多劳的这种保守的想法却使得 babel-loader 成为了整个构建的性能瓶颈。所以我们可以使用 exclude，大胆地屏蔽掉 npm 里的包，从而使整包的构建效率飞速提高。

loaders: [{
    test: /\.js[x]?$/,
    exclude: /(node_modules)|(global\/lib\/)/,
    loader: 'babel-loader'
},

3、 DllReferencePlugin

对于jquery，react这种第三方库重复编译会造成时间上的浪费。

所以我们把这些文件打包成 lib.js 文件插件命名参考c++。 dll代表用来被引用的文件。

1、创建一个 webpack.dll.conf.js

var vendors = [
'jquery',
'underscore',
'react',
'react-dom',
];

module.exports = {
    output: {
        path: path.resolve(process.cwd(),'build/lib/'),
        filename: '[name].js',
        library: '[name]',
    },
    entry: {
        "lib": vendors,
    },
    resolve: {
        alias: ...
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.resolve(process.cwd(),'build/lib/manifest.json'),
            name: '[name]',
            context: __dirname,
        }),
    ],
};

我们把vendors中的文件打包为一个 lib.js

加入了 webpack.DllPlugin 插件

output 中增加了 library

运行后会在lib目录生成一个 lib.js 和 manifest.json
lib.js 是编译后的文件
manifest.json是用来告诉项目的 webpack 相关模块对应lib.js。

在webpack.conf.js中增加

     new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./lib/manifest.json')
        }),

完成后先编译一次dll 再执行项目编译。dll文件编译一次后除非变更否则不需要再编译。
页面中

 //先引入lib.js 或者 把两者合并

对项目中的 common.js dll前后做了一次对比

dll前 186秒
dll后 92秒

4、HappyPack

https://github.com/amireh/happypack

总结

dll 和 HappyPack的方案对速度有明显的提高。

webpack优化，大大提高你的构建速度！