Vue项目打包优化
优化方案
1. 路由懒加载
Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
可根据官网操作： router.vuejs.org/zh/guide/ad…
2. 第三方插件按需加载
element-ui，vant，uni-app等等... 实现按需加载，同时我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的
3. 插件库使用CDN加速，导入插件时使用第三方库进行使用。
www.bootcdn.cn/ 官网 根据自己项目package.json文件对应版本进行导入
index.html中引入对应版本 我这里基于Vue2项目进行引入。
<!-- vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- vue-router -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.min.js"></script>
<!-- element-ui -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
<!-- echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.js"></script>
<!-- ore-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。 -->
<script src="https://cdn.bootcdn.net/ajax/libs/core-js/3.28.0/minified.js"></script>
<!-- 持久化 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.cjs.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Base64/1.2.0/base64.js"></script>
vue.config.js中进行配置，打包时不要打包这个CDN引入的文件
configureWebpack: config => {
config.externals = {
vue: "Vue",
"vue-router": "VueRouter",
axios: "axios",
// 属性带-杠 就用引号否则不用
"element-ui": "element-ui",
echarts: "echarts",
"core-js": "core-js",
"vuex-persistedstate": "vuex-persistedstate",
vuex: "vuex",
Base64: "Base64"
}
}
4. gzip压缩，有两种方式.
- 让服务器压缩：当浏览器发送请求时，服务器进行实时压缩，返回浏览器
- webpack打包时，进行压缩，浏览器请求时，服务端进行一些配置，返回压缩文件
下载指令CMD
npm i compression-webpack-plugin -D
vue.config.js中进行配置
chainWebpack: config => {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
threshold: 10240, // 超过10kb的文件就压缩
deleteOriginalAssets: true, // 不删除源文件
minRatio: 0.8
})
)
}
}
打包时dist/js中会有gz压缩文件，说明压缩成功。
5. 打包不生成map文件
map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
那么在项目打包时我们是可以设置不生成map文件的，因为map文件会使得我们的打包文件大很多
不生成map文件配置如下
module.exports = {
productionSourceMap: false,
}
6. 可视化分析包大小
这是一个插件工具，能够看到自己的项目大小，并且通过视图的形式展示出来，这样就可以更加明确自己要优化哪一块的项目文件。
下载指令CMD
npm install webpack-bundle-analyzer -D
vue.config.js中进行配置
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end()
}
const CompressionWebpackPlugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
threshold: 10240, // 超过10kb的文件就压缩
deleteOriginalAssets: true, // 不删除源文件
minRatio: 0.8
})
)
}
}
运行指令
npm run build --report
