1, 把不修改的 package 单独打包成一个文件
(1) build 下新建一个 webpack.dll.conf.js 文件
build 的时候加上 --report 可以看到文件大小, 把不用修改的体积较大的文件, 打包成一个 dll.js 文件
npm run build --report 会自动打开一个 analyzer 窗口
内容:
- var path = require("path");
- var webpack = require("webpack");
- module.exports = {
- // 你想要打包的模块的数组
- entry: {
- vendor: ['vue/dist/vue.esm.js','mint-ui','axios','vuex']
- },
- output: {
- path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
- filename: '[name].dll.js',
- library: '[name]_library'
- // vendor.dll.js 中暴露出的全局变量名.
- // 主要是给 DllPlugin 中的 name 使用,
- // 故这里需要和 webpack.DllPlugin 中的 `name: '[name]_library',` 保持一致.
- },
- plugins: [
- new webpack.DllPlugin({
- path: path.join(__dirname, '.', '[name]-manifest.json'),
- name: '[name]_library',
- context: __dirname
- }),
- // 压缩打包的文件, 与该文章主线无关
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- }
- })
- ]
- };
(2) 修改 build/webpack.prod.conf.js
文件中的 plugins 添加
- new webpack.DllReferencePlugin({
- context: __dirname,
- manifest: require('./vendor-manifest.json')
- })
(3) 在 package.json 文件中添加一个指令
"dll": "webpack --config ./build/webpack.dll.conf.js"
然后执行 npm run dll
会在 static 里面生成一个 / js/vender.dll.js 文件
(4) 在 index.html 中引用
<script src="./static/js/vendor.dll.js"></script>
2, 压缩 gzip
(1) 修改 config/index.js
productionGzip: false,
改成 true
(2) 安装 compression-webpack-plugin
- npm i compression-webpack-plugin --save-dev
- (3) npm run build
你会发现多了. gz 的文件
来源: http://www.qdfuns.com/article/42435/a0cd634682e9e28b0dee9c410f0510e8.html