Webpack打包优化-CSDN博客

简单粗暴的Webpack打包优化

使用webpack+vue+......，在打包代码的时候经常由于引入的模块太多，导致打包速度很慢，并且打包后的js文件很大。

方案一：externals选项

配置externals选项：

// webpack.prod.config.js
// 多余代码省略
module.exports = {
    externals: {
        'vue': 'window.Vue',
        'vuex': 'window.Vuex',
        'vue-router': 'window.VueRouter'
        ...
    }
}

// 配置externals之后，webpack不会把配置项中的代码打包进去，别忘了需要在外部引入cdn上的js文件
// html
<body>
    <script src="XXX/cdn/vue.min.js"></script>
    ......
</body>

方案二：webpack.DLLplugin

使用webpack.DLLplugin：

webpack.dll.config.js：

// webpack.dll.config.js

// 需要打包到一起的js文件
const vendors = [
    'vue',
    'vuex',
    'vue-router',
    'axios',
    'moment',
    'vue-echarts'
];

module.exports = {
    // 也可以设置多个入口，多个vendor，就可以生成多个bundle
    entry: {
        vendor: vendors
    },

    // 输出文件的名称和路径
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, '..', 'static'),
        library: '[name]_[chunkhash]',
    },

    plugins: [
        // 这时候打包需要设置环境为production，因为像vue之类在
        // dev环境下会比prod环境多一些信息，在生产环境如果打包的是dev代码，
        // vue也会给出警告
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '..', 'static', '[name]-manifest.json'),
            name: '[name]_[chunkhash]',
            context: __dirname
        }),
        
        // 压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: true
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        new webpack.optimize.OccurrenceOrderPlugin()
    ]
}

写好配置文件之后，执行命令：

webpack --config webpack.dll.config.js

之后就会在输出目录下看到两个文件：

// 打包后的js文件需要在页面中引入
vendor.bundle.js

// 这个依赖关系文件用于app打包
vendor-manifest.json

webpack.prod.config.js:

// webpack.prod.config.js
// 省略不必要的代码
module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require(path.join(__dirname, '..', 'static/vendor-manifest.json'))
        })
    ]
}

之后再执行命令去打包app中的静态资源文件的时候，就不会把vendor.bundle.js中已有的文件与自己的逻辑文件打包到一起，能够有效减小体积，同时manifest.json提供的依赖关系和模块id号也可以大大提高打包效率。