浅谈vue项目的优化

webpack压缩静态资源图片

安装image-webpack-loader插件,在项目打包的时候对项目中静态资源图片文件进行压缩，对于比较小的图片会被转成base64引用

(踩坑)项目中通过npm安装的时候会报错，可以把包删掉用cnpm进行安装，完美解决。

  chainWebpack: config => {
      //开启图片压缩
      config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      }

路由懒加载

路由懒加载会动态的加载组件，只在用到某个组件的时候加载而不是一次全部加载，这样会使打包后的文件体积更小

代码如下：

 {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */'../views/login/login.vue')
  },

引入第三方cdn资源

引入cdn，可以排除项目中安装的一些第三方包，减少项目打包后的体积，比如echarts等一些体积比较大的第三方包可以用cdn引入来减小打包体积。
vue.config.js配置如下：

module.exports = {
 chainWebpack: config => {
	        // 发布模式
        config.when(process.env.NODE_ENV == 'production', config => {
		        /*设置生产环境的入口文件*/
		      config.entry('app').clear().add('./src/main-prod.js')
	         // externals指定要排除包
	          config.set('externals', {
	            'vue': 'Vue',
	            'vue-router': 'VueRouter',
	            'vuex': 'Vuex',
	            'axios': 'axios',
	            'echarts': 'echarts'
	          })
		        // 是plugin在public/index.html中添加变量
		        // 用以判断运行的环境是否是发布
		          config.plugin('html').tap(args => {
		            args[0].isProd = true
		            return args
		          })
     		 })
  		 },
	}
}
  

html静态文件如下：

 <% if(htmlWebpackPlugin.options.isProd){ %>
      <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
      <script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script>
      <script src="https://unpkg.com/vuex@3.4.0"></script>
      <script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
      <script src="https://unpkg.com/echarts@5.3.2/dist/echarts.js"></script>
    <% } %>

使用工具压缩图片大小

使用一些工具对项目中一些比较大的背景图进行压缩，从而减少静态资源的体积，工具可以百度。

使用精灵图或者字体图标

对项目中一些体积比较小的图片可以使用通过小工具合并成一张精灵图，可以减少图片请求服务器的次数，或者在项目中使用字体图标，比如阿里字体图标库，可以让UI把项目中用到的图标上传到字体图标库，通过下载到本地，然后可以在项目中全局引入

生成精灵图工具：CSS Sprites Generator

———————— 未完待补充 ——————