webpack压缩

国庆节前, 用react写了个小项目, 写完就扔给别人, 然后出去浪了…等回来, 被告知JS文件太大(770KB), 用户体验太差. 然后改呗
压缩之前的webpack.config.js如下:

var webpack = require("webpack")
module.exports = {
    entry: "./src/app.js",
    output: {
        path: __dirname+"/build",
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                plugins: ["transform-runtime"],
                presets: ["es2015", "react", "stage-2"]
            }
        },{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },{
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
        },{
            test: /\.(png|gif|jpg|jpeg|ico)$/,
            loader: "url-loader?limit=10240&name=images/[hash:8].name.[ext]"
        }]
    }
}

可以看到没有任何压缩标识, 所以打包后就有770KB.
压缩之前的文件结构如下:

webpack.dll.config.js是DLL提取三方库必须的文件, 如下

const webpack = require("webpack")
const library = '[name]_lib'
const path = require("path")

module.exports = {
    entry: {
        vendors: ["react"]
    },
    output: {
        filename: "[name].dll.js",
        path: __dirname+"/build/",
        library
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "build/[name]-manifest.json"),
            name: library
        })
    ]
}

数组module.exports.entry.vendors保存第三方库, 逗号分隔.

同时, 还要对webpack.config.js文件作如下修改:

var webpack = require("webpack")
module.exports = {
    entry: "./src/app.js",
    output: {
        path: __dirname+"/build",
        filename: "bundle.js"
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./build/vendors-manifest.json")
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                plugins: ["transform-runtime"],
                presets: ["es2015", "react", "stage-2"]
            }
        },{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },{
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
        },{
            test: /\.(png|gif|jpg|jpeg|ico)$/,
            loader: "url-loader?limit=10240&name=images/[hash:8].name.[ext]"
        }]
    }
}

新增的只是module.exports.plugins这个数组

代码改造之后, 在项目根目录下运行如下代码:

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

采用DLL的方式提取第三方库之后的文件结构如下:

新增了三个文件, 如上图

vendors.dll.js意在将一些稳定且不经常变化的插件(或框架)打包在一起, 将自写代码与插件代码分离, 提升开发效率. 而build下的vendors-manifest.json则是缓存设置, 减少占用资源.

而压缩的实现具体体现在webpack.config.js里的module.exports.plugins[1], 它是webpack自带的压缩插件, 直接使用即可.
压缩后的文件大小(bundle.js+vendors.dll.js)只有300多K
在index.html需要按下面方式引用
注意加载顺序

<script src="./build/vendors.dll.js"></script>
<script src="./build/bundle.js"></script>

由于webpack版本不同(此为webpack3.x), 可能会有一些报错, 自行领会 :<)
另外介绍两篇文章, 讲的比我好多了

彻底解决 webpack 打包文件体积过大
Webpack DLL 用法