webpack性能优化之打包优化

1、禁止生成 sourceMap 文件

Vue打包时会生成map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。。

module.exports ={productionSourceMap:false,// 默认为true
}

2、关闭 Prefetch

vuecli-3 默认开启 Prefetch 预加载模式，提前获取用户可能会访问的内容。在首屏会把这十几个路由文件都下载下来（不会影响首屏加载速度，只会优化子页面）

3、路由懒加载

4、UI 组件库按需加载

5、CDN 加载外部资源

在我们的项目中通常会使用到很多的第三方库，这些插件往往都是不会作更改的，所以我们可以选择将这些插件库使用CDN引入的方式，而不将这些库打包到我们的项目目录中。（vue、vuex、axios，vue-router）可以使用webpack的 externals，它可以忽略掉不需要打包的库

module.exports = {configureWebpack: config => {config.externals = {vue: "Vue","vue-router": "VueRouter",axios: "axios",}}
}

(注意：在书写键值对时，值是第三方库作者定义的名字是不可修改的，如果把值名书写错误那么控制台会直接抛出错误。例如：
“vue-router”:“vue-router” //这是错误的书写方式
“vue-router”: “VueRouter” //这是正确的书写方式
当你在使用外部CDN加速时若项目抛出错误，你可以检查你的键值对的书写是否正确以此来排除你的BUG )

6、gzip 文件压缩 compression-webpack-plugin

const webpack = require("webpack")
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ["js", "css"]module.exports = {configureWebpack: (config) => {const plugins = []//start 生成gzip压缩文件plugins.push(// Ignore all locale files of moment.jsnew webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),// 配置compression-webpack-plugin压缩new CompressionWebpackPlugin({algorithm: "gzip",test: new RegExp("\\.(" +productionGzipExtensions.join("|") + ")$"),threshold: 10240,	//对10K以上的数据进行压缩minRatio: 0.8,}),new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5,minChunkSize: 100,}))//end 结束生成gzip压缩文件config.plugins = [...config.plugins, ...plugins]}
}

7、代码压缩 uglifyjs-webpack-plugins，去除console.log打印以及注释

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';configureWebpack: config => {const plugins = [];if (isProduction) {plugins.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false, // 去掉注释},warnings: false,compress: {drop_console: true,drop_debugger: false,pure_funcs: ['console.log']//移除console}}}))}
},

8、图片压缩 image-webpack-loader

// 默认设置
const defaultOptions = {bypassOnDebug: true
}
// 自定义设置
const customOptions = {mozjpeg: {progressive: true,quality: 50},optipng: {enabled: true,},pngquant: {quality: [0.5, 0.65],speed: 4},gifsicle: {interlaced: false,},// 不支持WEBP就不要写这一项webp: {quality: 75}
}chainWebpack: config => {// …config.module.rule(‘images’).test(/.(gif|png|jpe?g|svg)$/i).use(‘image-webpack-loader’).loader(‘image-webpack-loader’).options(customOptions) //默认配置就defaultOptions 这个.end()//…}}