前端优化有哪些？？分为代码优化，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'
		]

组件库按需引入参考链接1
组件库按需引入参考链接2

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。

参考1
参考2
参考3
你真的会用happyPack吗？

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') // 找到依赖
      }),
)