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 用法