2019-5-22 公司项目 代码优化1-webpack DllPlugin/DllReferencePlugin 抽出不常编译的模块单独打包

1.webpack

webpack.DllPlugin/DllReferencePlugin 抽出常用的插件,单独打包成js然后,塞到index.html中

webpack.dll.conf.js

const path = require('path');
const webpack = require('webpack');

const webpackConfig = {
    entry: {
        vendor: ['vue','vue-router','axios','vuex','fastclick','vue-lazyload','nprogress'],
    },
    devtool: '#source-map',
    output: {
        path: path.join(__dirname, '../dist'),
        filename: '[name]_[hash].dll.js',
        library: '[name]_[hash]',
    },
    plugins: [
        new webpack.DllPlugin({
            context: __dirname,
            name: '[name]_[hash]',
            path: path.join(__dirname, '../dist/manifest.json'),
        })
    ],
};

module.exports = webpackConfig

 

webpack.dev.conf.js

    new webpack.DllReferencePlugin({
        //  context: path.join(__dirname),
        context:  __dirname,
        manifest: require('../dist/manifest.json'),
    }),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true,
        hash:true
    }),
    new AddAssetHtmlPlugin([{
        filepath: path.resolve(__dirname, '../dist/*.dll.js'),
    }]),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'app',
        async: 'vendor-async',
        children: true,
        minChunks: 3
    })

坑:

DllReferencePlugin和DllPlugin的context:一定要保持一致,否则,会找不到路径,然后抽出失败;

 

抽出前,h5.js大小在1.2M左右,抽出vendor_xxx.dll.js后,变成1.0M;