最新打包vue cli 4.5 项目时,体积尽然达到了9M,页面访问的速度,因此进行尝试进行优化,最终压缩到 968k ,效果明显。下面是优化方法。
首先新建文件'
vue.config.js
',放在项目根目录下,与package.json
在同一级目录下
1.BundleAnalyzer
作用:展示打包图形化信息,会打开一个html页面,帮助自己分析哪些文件过大,可针对其进行优化,上线前
注释掉
安装 webpack-bundle-analyzer
插件
1 |
npm install webpack-bundle-analyzer --save-dev
|
在 vue.config.js:
里面:
1 2 3 4 5 6 7 8 9 |
// 引入
const BundleAnalyzerPlugin = require( "webpack-bundle-analyzer" ).BundleAnalyzerPlugin;
// 展示图形化信息
chainWebpack: config => {
config
.plugin( 'webpack-bundle-analyzer' )
.use(BundleAnalyzerPlugin)
}
|
2.抽离 css 支持按需加载
安装 mini-css-extract-plugin
插件
1 |
npm install mini-css-extract-plugin -D
|
在 vue.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
chainWebpack: config => { let miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].[hash:8].css', chunkFilename: 'assets/[name].[hash:8].css' }) config.plugin('extract-css').use(miniCssExtractPlugin) }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
3.图片按需加载
安装image-webpack-loader
插件
npm install image-webpack-loader -D
在 vue.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end()
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
图片压缩可以在:https://tinypng.com/ 进行批量压缩
4.gzip压缩代码
安装 compression-webpack-plugin
插件
npm install compression-webpack-plugin -D
在 vue.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
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 // 删除原文件 } ) )
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
5.element-ui 按需加载
安装 babel-plugin-component
插件
npm install babel-plugin-component --save-dev
在 babel.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
6.Echarts 按需加载
安装 babel-plugin-equire
插件:
npm install babel-plugin-equire -D
创建 echarts.js
:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
// eslint-disable-next-line const echarts = equire([ // 写上你需要的 echarts api "tooltip", "line" ]); export default echarts;
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
在 babel.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ], "equire" ] }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
具体页面应用:
// 直接引用 import echarts from '@/lib/util/echarts.js' this.myChart = echarts.init(this.$refs.chart)
7.lodash 按需加载
安装 lodash-webpack-plugin
插件
npm install lodash-webpack-plugin --save-dev
在 babel.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ], "lodash", "equire" ] }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
在 vue.config.js
里面:
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); chainWebpack: config => { config .plugin("loadshReplace") .use(new LodashModuleReplacementPlugin()); }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
8.prefetch 和 preload
删除无用的插件,避免加载多余的资源(如果不删除的话,则会在 index.html 里面加载 无用的 js 文件)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
chainWebpack: config => { // 移除prefetch插件,避免加载多余的资源 config.plugins.delete('prefetch') / 移除 preload 插件,避免加载多余的资源 config.plugins.delete('preload'); }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
vue.config.js文件中完整代码
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)
onst MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); module.exports = { productionSourceMap: false, // 关闭生产环境的 source map lintOnSave: false, publicPath: process.env.VUE_APP_PUBLIC_PATH, devServer: { host: "localhost", port: 3002, proxy: { '/api': { target: "https://tapi.quanziapp.com/api/", ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } }, } }, chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete('prefetch'); // 移除 preload 插件,避免加载多余的资源 config.plugins.delete('preload'); config.optimization.minimize(true); config.optimization.splitChunks({ chunks: 'all' }) config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) if (process.env.NODE_ENV !== 'development') { let miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].[hash:8].css', chunkFilename: 'assets/[name].[hash:8].css' }) config.plugin('extract-css').use(miniCssExtractPlugin) config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin()); config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() .use('url-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }).end() config.module.rule('svg') .test(/\.(svg)(\?.*)?$/) .use('file-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }) } }, configureWebpack: config => { // config.plugins.push(["equire"]); if (process.env.NODE_ENV !== 'development') { config.output.filename = 'assets/[name].[hash:8].js' config.output.chunkFilename = 'assets/[name].[hash:8].js' } // 公共代码抽离 config.optimization = { // 分割代码块 splitChunks: { cacheGroups: { //公用模块抽离 common: { chunks: 'initial', minSize: 0, //大于0个字节 minChunks: 2, //抽离公共代码时,这个代码块最小被引用的次数 }, //第三方库抽离 vendor: { priority: 1, //权重 test: /node_modules/, chunks: 'initial', minSize: 0, //大于0个字节 minChunks: 2, //在分割之前,这个代码块最小应该被引用的次数 }, }, } } // 开启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 // 删除原文件 } ) ) }, css: { extract: true, sourceMap: false, loaderOptions: { sass: { }, }, }, }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
![复制代码](https://common.cnblogs.com/images/copycode.gif)