最近优化了一个vue cli3.0项目，项目从打包体积2.5M，优化到272k, 速度提高了约2/3。下面将优化方法写下：
需要新建文件'
vue.config.js'，(这文件名是固定这么写的)，与package.json在同一级目录下。
BundleAnalyzer
作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前
注释掉
安装 webpack-bundle-analyzer 插件
npm install webpack-bundle-analyzer --save-dev
在 vue.config.js: 里面：
// 引入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 展示图形化信息 chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) }
抽离 css 支持按需加载
安装 mini-css-extract-plugin 插件
npm install mini-css-extract-plugin -D
在 vue.config.js里面：
chainWebpack: config => { let miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].[hash:8].css', chunkFilename: 'assets/[name].[hash:8].css' }) config.plugin('extract-css').use(miniCssExtractPlugin) }
图片按需加载
安装image-webpack-loader插件
npm install image-webpack-loader -D
在 vue.config.js里面：
config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end()
图片压缩可以在：https://tinypng.com/ 进行批量压缩
gzip压缩代码
安装 compression-webpack-plugin 插件
npm install compression-webpack-plugin -D
在 vue.config.js里面：
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启gzip压缩 config.plugins.push( new CompressionWebpackPlugin( { filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240, // 只有大小大于该值的资源会被处理 10240 test: new RegExp('\\.(' + ['js'].join('|') + ')$' ), minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 } ) )
公共代码抽离
在 vue.config.js里面：
// 开启gzip压缩 configureWebpack: config => { config.plugins.push( new CompressionWebpackPlugin( { filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240, // 只有大小大于该值的资源会被处理 10240 test: new RegExp('\\.(' + ['js'].join('|') + ')$' ), minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 deleteOriginalAssets: false // 删除原文件 } ) ) }
element-ui 按需加载
安装 babel-plugin-component 插件
npm install babel-plugin-component --save-dev
在 babel.config.js里面：
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] }
