vue项目优化整理

对vue项目优化的的一些整理，分为代码优化和webpack部分优化。

工具

可视化资源分析工具（webpack-bundle-analyzer）

• 安装

npm install webpack-bundle-analyzer –save-dev

• 配置
  在vue.config.js文件中

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  },
 }

• 启动

yarn run build --report  // 生成分析报告

• 其他的一些
  stat (打包之前输入的文件大小)
  parsed（打包之后输出的文件大小）
  gzipped（开启gzip压缩后的文件大小）
  chrome工具Coverage 查看利用率

代码优化

• 代码模块化
• v-show和v-if的正确使用
• for循环设置key值
  为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff
• 路由设置成懒加载
  component：resolve=>require([‘路径’]‘，resolie)
  或（）=> import(‘路径’)
• 分批处理
  可以用requestAnimationFrame分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染
  requestAnimationFrame：请求动画帧
  介绍地址：https://www.jianshu.com/p/fa5512dfb4f5
• 活用延迟加载（defer）
• 理解vue的生命周期
  不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null
  生命周期：beforeCreate、created（创建）、beforeMount、mounted（加载）、beforUnpdate、updated（更新）、beforeDestroy、destroyed（摧毁）
• 使用keep-alive
• 减少图片使用
  使用css3效果、字体图标、雪碧图

webpack优化

• 取消map的文件
  productionSourceMap:false
• 用cdn的方式加载一些资源

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

vue.config.js

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}

• 切换多入口模式
  适用大型项目
  在大型项目中，单入口的缺点： a.无法拆分按模块独立部署；b.负载过重，业务模块较多时，频繁切换业务模块，在IE浏览器中，浏览器内存持续上涨，容易崩溃。
  在大型项目中，多入口的优点：a.满足页面需求分开部署的场景；b.解决页面卡顿呵内存上涨问题
• 关闭Prefetch（预先加载模块）
  vue li3 默认开启的prefetch
  在vue.config.js

module.exports = {
	chaninWebpack:config =>{
		config.plugins.delete('prefetch')  // 移除prefetch插件
		// 或者
		// 修改选项
		config.plugin('prefetch').tap(options => {
	        options[0].fileBlacklist = options[0].fileBlacklist || []
	        options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
	        return options
      	})
	}
}

• 代码压缩
  uglifyjs-webpack-plugin 插件
  在vue.config.js配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生产环境相关配置
if (isProduction) {
    // 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境自动删除console
                compress: {
                    warnings: false, // 若打包错误，则注释这行
                    drop_debugger: true,
                    drop_console: true,
                    pure_funcs: ['console.log']
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

• 公共代码抽离
  在vue.config.js配置

// 公共代码抽离
config.optimization = {
    splitChunks: {
        chunks: 'all',
        // minSize: 3000000,         //字节 引入的文件大于3M才进行分割
        // maxSize: 2000000,         //2000kb，尝试将大于2000kb的文件拆分成n个2000kb的文件
        // minChunks: 1,           //模块至少使用次数
        // maxAsyncRequests: 10,    //同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
        // maxInitialRequests: 3,  //首页加载的时候引入的文件最多3个
        cacheGroups: {
            libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          elementUI: {
            name: 'chunk-elementUI', // split elementUI into a single package
            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
    }
}

• gzip压缩
  安装compression-webpack-plugin
  在vue.config.js文件配置

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
     // 为生产环境修改配置...
     config.mode = 'production'
     return {
         plugins: [new CompressionPlugin({
             test: /\.js$|\.html$|\.css/, //匹配文件名
             threshold: 10240, //对超过10k的数据进行压缩
             deleteOriginalAssets: false //是否删除原文件
         })]
     }
  }
}

在服务器我们也要做相应的配置。
发送请求的浏览器支持gzip，就发送给它gzip格式的文件