webpack之优化打包速度

Jan 27, 2018 | 前端之巅 | Hits

打包结果分析

1.

1 2	webpack --profile --json > stats.json webpack --profile --json \| Out-file 'stats.json' -Encoding OEM

传到官方

2.

cnpm install webpack-bundle-analyzer --save-dev

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
new BundleAnalyzerPlugin()

vue-cli使用

1 2	"analyz": "NODE_ENV=production npm_config_report=true npm run build" npm run analyz

优化打包速度

在写admin的时候项目地址

后面发现打包速度越来越慢，如何处理（第三方依赖不需要重复打包）

先打包一遍

在build下创建webpacl.ddl.conf.js

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

/**
 * 打包第三方库
 */
module.exports = {
    entry: {
        vue: ['vue', 'vue-router'],
        ui: ['element-ui']
    },

    output: {
        path: path.join(__dirname, '../src/dll/'),
        filename: '[name].dll.js',
        library: '[name]'
    },

    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, '../src/dll/', '[name]-manifest.json'),
            name: '[name]'
        }),

        new webpack.optimize.UglifyJsPlugin()
    ]
}

运行会在src下生成ui-manifest.json 和 vue-manifest.json

1	webpack --config build/webpacl.ddl.conf.js

找到webpack.prod.conf.js,在plugins加入

new webpack.DllReferencePlugin({
  manifest: require('../src/dll/ui-manifest.json')
}),

new webpack.DllReferencePlugin({
  manifest: require('../src/dll/vue.json')
}),

找到webpack.prod.conf.js,在plugins修改UglifyJsPlugin增加cache: true缓存，sourceMap改成false

new webpack.optimize.UglifyJsPlugin({
	compress: {
		warnings: false
	},
	sourceMap: false,
	cache: true
})

前端