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",plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,manifest: require("./build/vendors-manifest.json")
        }),new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],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 用法

webpack压缩

相关文章