Webpack打包和优化

webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。

大小优化

1.CommonsChunk

前端构建项目中，为了提高打包效率，往往将第三库与业务逻辑代码分开打包，因为第三方库往往不需要经常打包更新。webpack建议使用CommonsChunk 来单独打包第三方库：

module.exports = {
    entry: {
        vendor: ['react','react-dom'],
        app: "./main",
    },
    output: {
        path: './build',
        filename: '[name].js',
        library: '[name]_library'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "vendor",
        }),
    ]
};

CommonsChunk虽然可以减少包的大小，但存在问题是：即使代码不更新，每次重新打包，vendor都会重新生成，不符合我们分离第三方包的初衷。

2.Externals

相比于前者，webpack 提供Externals的方法，可以通过外部引用的方法，引入第三方库： index.html

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

 webpack.config.js

module.exports = {
   externals: {
     jquery: 'jQuery'
   }
};

业务逻辑，如index.js

import $ from 'jquery';
$('.my-element').animate(...);

webpack遇到此问题时，会重新打包react代码。 参考：https://gold.xitu.io/entry/57996222128fe1005411c649

3.DLL & DllReference

相比于前者，通过前置这些依赖包的构建，来提高真正的build和rebuild构建效率。也就是说只要第三方库没有变化，之后的每次build都只需要去打包自己的业务代码，解决Externals多次引用问题。 webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能。
1、新建webpack.dll.config.js

const webpack = require('webpack');

module.exports = {
    entry: {
        bundle: [
            'react',
            'react-dom',
            //其他库
            ],
    },
    output: {
        path: './build',
        filename: '[name].js',
        library: '[name]_library'
    },
    plugins: [
        new webpack.DllPlugin({
            path: './build/bundle.manifest.json',
            name: '[name]_library',
        })
    ]
};

webpack.DllPlugin选项：

• path：manifest.json文件的输出路径，这个文件会用于后续的业务代码打包；
• name：dll暴露的对象名，要跟output.library保持一致;
• context：解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

运行：

npm run webpack-dll

 生成两个文件，一个是打包好的bundlejs，另外一个是bundle.mainifest.