标签：rar lib 清除 route 动态 tiny extra 速度 tput
页面性能优化可以从两方面着手，第一个时页面加载速度，第二个是页面运行时性能，这里主要说页面加载性能。
1.vue 路由的懒加载
component: () =>import(/* webpackChunkName: "quality-overseer-msg" */ "@/views/quality-overseer/QualityOverseerMsg.vue")
2.第三方库的按需引入
如果框架中使用一些库，像element-ui,echarts，这些库不要一下子全部引入，二是按需引入，这样可以减小打包体积。
3.图片的压缩
这里推荐使用https://tinypng.com/
4.js,css 文件的最小压缩
module.exports = { chainWebpack: config => { config.optimization.minimize(true); } }
5.css文件的抽离
因为js会动态的加载出css，所以js文件包会比较大，那么需要提取css代码到文件. 这里我们只需要将css配置一下:
module.exports = { css: { extract: true } }
6.js,css代码公用代码提取, 按需引入(CDN加载)
module.exports = { // 用cdn方式引入 config.externals({ ‘vue‘: ‘Vue‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘: ‘VueRouter‘, ‘axios‘: ‘axios‘ }) } }
index.html加入CDN地址,注意引入的时候要写在body里面，否则会报错。
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
7.使用DLLPlugin分离第三方库
一般可以将代码简单分为业务代码和第三方库，如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。
基本用法在根文件夹下
（1）编写配置文件webpack.dll.config.js
const path = require(‘path‘) const webpack = require(‘webpack‘) const CleanWebpackPlugin = require(‘clean-webpack-plugin‘) // dll文件存放的目录 const dllPath = ‘public/vendor‘ module.exports = { entry: { // 需要提取的库文件 vendor: [‘vue‘, ‘vue-router‘, ‘echarts‘, ‘axios‘, ‘element-ui‘] }, output: { path: path.join(__dirname, dllPath), filename: ‘[name].dll.js‘, // vendor.dll.js中暴露出的全局变量名 // 保持与 webpack.DllPlugin 中名称一致 library: ‘[name]_[hash]‘ }, plugins: [ // 清除之前的dll文件 new CleanWebpackPlugin([‘*.*‘], { root: path.join(__dirname, dllPath) }), // 设置环境变量 new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: ‘production‘ } }), // manifest.json 描述动态链接库包含了哪些内容 new webpack.DllPlugin({ path: path.join(__dirname, dllPath, ‘[name]-manifest.json‘), // 保持与 output.library 中名称一致 name: ‘[name]_[hash]‘, context: process.cwd() }) ]
（2）在packge.json中加入一行命令 "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
const webpack = require(‘webpack‘) module.exports = { configureWebpack: { plugins: [ new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(‘./public/vendor/vendor-manifest.json‘) }) ] } }
（4.index.html 中加载生成的 dll 文件
<script src="./vendor/vendor.dll.js"></script>
(5).如果觉得第四步手动引入麻烦，可以在vue.config.js添加一下配置
1.首先安装相关插件 yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev
2.vue.config.js 在 configureWebpack plugins 节点下，配置 add-asset-html-webpack-plugin
const path = require(‘path‘) const webpack = require(‘webpack‘) const AddAssetHtmlPlugin = require(‘add-asset-html-webpack-plugin‘) module.exports = { ... configureWebpack: { plugins: [ new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require(‘./public/vendor/vendor-manifest.json‘) }), // 将 dll 注入到 生成的 html 模板中 new AddAssetHtmlPlugin({ // dll文件位置 filepath: path.resolve(__dirname, ‘./public/vendor/*.js‘), // dll 引用路径 publicPath: ‘./vendor‘, // dll最终输出的目录 outputPath: ‘./vendor‘ }) ] } }
至此vue项目优化就差不多了。
标签：rar lib 清除 route 动态 tiny extra 速度 tput
原文地址：https://www.cnblogs.com/ze-hua/p/12802097.html
