优化分为代码优化，vue性能优化，vue项目打包优化
优化分为代码优化如下：
1、不要将所有的数据都放在data中，data中的数据会增加getter和setter，会收集对应的watcher
2、v-if 改为 v-show
3、v-for 增加唯一的 key， diff 对比减少性能消耗
4、object.freeze 冻结数据之后（就不会给这个数据添加getter 和 setter方法）
5、computed 计算属性
6、拆分组件（封装公有组件，公有函数，提高代码复用性，大于2遍的提函数，减少代码冗余）
7、SPA 页面采用keep-alive缓存页面
8、数据持久化问题（防抖、节流）
9、合理使用路由懒加载、异步组件
10、v-for绑定事件用事件代理： 利用事件冒泡的原理(事件会向它的父级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，可以极大减少事件绑定次数，提高性能；也可以让新加入的子元素也可以拥有相同的操作。
html5中添加了新属性data-xxx 可以用来存储数据
vue性能优化
1、路由懒加载：import from 改为 const ABX = () => import()
2、表格使用 虚拟表格，比如有100条数据，只展示这一屏幕数据，根据滚动条滚动的高度，页面可存放的数据，在100条中截取一部分数据渲染， 我写的财务表格是这样实现的
3、图片懒加载
用户体验
骨架屏
vue项目打包优化如下：
vue.config.js配置插件优化
1、首先用 webpack-bundle-analyzer （i na lai zer） 下载一个页面性能分析器，在启动项目时会打开一个页面，各个文件的大小 ， 使用 在plugins中 new BundleAnalyzerPlugin()
开始优化：
1、externals（ex t ner s） 提取项目依赖
将vue/router/axios/echarts 放在这个配置项中，不会参与打包，在html文件中通过cdn的方式引入这些文件地址
配置：
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts'
}
缺点： 1、它缺少按需引入，没有执行顺序
如果element使用cdn 引入，那么vue也必须使用cdn引入，所以不推荐使用
替代它的方案：DllPlugin，提取公共依赖打包
2、验证组件库按需引入的有效性：
elementUI 需要借助 babel-plugin-component
Vant 需要借助babel-plugin-import
最终：chunk-vendors.css 的体积也有了明显的减少，从206KB降到了82KB
vue.config.js 同级新建一个 babel.config.js文件，配置如下
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
vantUi 借助
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
style: true
},
'vant'
]
3、HappyPack （快乐打包） 多线程打包
由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力
HappyPack 就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
modules:{
rules : [
{
test: /\.js$/,
loader:[ 'happypack/loader?id=happybabel'],
include: [resolve('src')]
}
]
},
plugin:[
//happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader'],
threads: 4,//HappyPack 使用多少子进程来进行编译
threadPool: happyThreadPool
}),
new HappyPack({
id: 'scss',
threads: 4,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
],
})
]
HappyPack 参数配置：
id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件.
loaders: Array 用法和 webpack Loader 配置中一样.
threads: Number 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数。
verbose: Boolean 是否允许 HappyPack 输出日志，默认是 true。
threadPool: HappyThreadPool 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多。
verboseWhenProfiling: Boolean 开启webpack --profile ,仍然希望HappyPack产生输出。
debug: Boolean 启用debug 用于故障排查。默认 false。
4、Gzip压缩 con pre tion（压缩） compression-webpack-plugin 插件
线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度
html、js、css资源，使用 gzip 后通常可以将体积压缩70%以上
这里介绍下使用 webpack 进行 gzip 压缩的方式，使用 （com p tion）压缩
plugins: [
new CompressionPlugin({
test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则
threshold: 1024, //文件大小大于这个值时启用压缩
deleteOriginalAssets: false //压缩后保留原文件
})
]
5、DllPlugin （D all lao）动态链接库、都是将依赖抽离出去，节约打包时间，
你真的需要 Webpack DllPlugin 吗？
DllPlugin 是将依赖单独打包，这样以后每次只构建业务代码，而 externals 是将依赖转化为 CDN 的方式引入
当公司没有很好的 CDN 资源或不支持 CDN 时，就可以考虑使用 DllPlugin ，替换掉 externals
新建 dll.config.js ,
entry [‘vue’, ‘vue-router’, ‘vuex’, ‘axios’]
output: {
path: dirname,dllPath,
filename: ‘’
}
plugins: [
CleanWebpackPlugin,
作用：manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。
new webpack.DllPlugin, 生成一个 manifest.json 文件
]
最后在 vue.config的 plugins 新增 new webpack.DllReferencePlugin ，获取到打包指定文件的依赖
https://blog.csdn.net/qq_35779012/article/details/119600682
6、移除console.log()
babel-plugin-transform-remove-console
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
plugins: [
...prodPlugins
]
7、 生产环境关闭 SourceMap 原文件
productionSourceMap: false
8、
--------下面是部分代码-------
5、DllPlugin 动态链接库详细步骤如下
创建 webpack.dll.conf.js
/*
然后定位在newapp目录下，执行命令 node demo/hello.js，输出结果如下：
__dirname 表示当前文件所在的目录的绝对路径
/Users/jerry/51talk/newapp/demo
__filename 表示当前文件的绝对路径
/Users/jerry/51talk/newapp/demo/hello.js
module.filename ==== __filename 等价
true
process.cwd() 返回运行当前脚本的工作目录的路径
/Users/jerry/51talk/newapp
process.chdir('/Users/jerry')
process.chdir() 改变工作目录
/Users/jerry
凡是以根开始的路径就是绝对路径
cd /user/local
或者以~开头的路径也是绝对路径
cd local
Webpack之DllPlugin 和 DllReferencePlugin
参考地址：https://blog.csdn.net/qq_35779012/article/details/119600682
*/
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', 'vuex', 'axios']
},
output: {
path: path.join(__dirname, dllPath),//拼接路径，文件打包后就到了 public/vendor文件下
filename: '[name].dll.js', // 打包之后的文件名，name 值为 entry对象中对应的key值
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]',// name 值为 entry对象中对应的key值 hash 为唯一的ID
libraryTarget: 'window' // 在window上绑定这个函数 axios，vue
// 不配置 library 时，__WEBPACK_DEFAULT_EXPORT__ 函数没有被公开，在库外部的任何位置都访问不到它。
// 配置之后，可以通过MyLibrary能访问到add函数，当不能保证MyLibrary在全局变量上
//参考地址：https://blog.csdn.net/sinat_40572875/article/details/127883563
},
plugins: [
// 清除之前的dll文件
new CleanWebpackPlugin(),
// 设置环境变量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
//manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'), // 生成vue.config.js中new webpack.DllReferencePlugin相映射
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd()
})
]
}
在vue.config.js
config.plugins.push(
// manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。
new webpack.DllReferencePlugin({ // 使用 webpack.dll.cong.js 打包之后，通过DllReferencePlugin引用到需要的预编译的依赖上来
context: process.cwd(), //返回运行当前脚本的工作目录的路径 返回到 all-modules文件
manifest: require('./public/vendor/vendor-manifest.json') // 找到依赖
}),
)
2035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
