Vue-Cli3/Webpack / i18n / image / CDN vue项目优化总结

如转载，请注明出处，谢谢。

vue项目优化总结

1、 开发环境下载性能分析插件，使用交互式可缩放树图可视化webpack输出文件的大小，便于分析；

npm install --save-dev webpack-bundle-analyzer

 /* vue.config.js */
chainWebpack(config) { //对webpack配置进行更改的方法
  /* 添加性能分析工具 */
  config
    .when(process.env.NODE_ENV !== 'production', //环境判断条件
         config => {
              config
              .plugin('webpack-bundle-analyzer')
              .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
              .end()
      })
}

   2、 图片压缩

npm install image-webpack-loader --save-dev

​
提示：如果下载失败，推荐使用cnpm下载
​
npm install cnpm -g --registry=https://registry.npm.taobao.org
​
cnpm install image-webpack-loader --save-dev
​

 /* vue.config.js */
chainWebpack(config) { 
   /*set image压缩 */
        config.module
            .rule("image")
            .test(/.(gif|png|jpe?g|svg)$/i)
            .use("image-webpack-loader")
            .loader("image-webpack-loader")
            .options({
                mozjpeg: { 
                    progressive: true, 
                    quality: 65 
                },
                optipng: { 
                    enabled: false 
                },
                pngquant: { 
                    quality: [0.65, 0.90], 
                    speed: 4 
                },
                gifsicle: { 
                    interlaced: false 
                },
                webp: { 
                    quality: 75 
                }
            })
            .end()
}

　3、 启用GZip压缩

npm install compression-webpack-plugin --save-dev
​
提示: 此项需要服务端开启gzip，前端在nginx已配置完毕，具体请参考前端部署文件；

const CompressionPlugin = require('compression-webpack-plugin')
 /* vue.config.js */
chainWebpack(config) { //对webpack配置进行更改的方法
 /* 启用GZip压缩 */
     config
        .when(process.env.NODE_ENV === 'production', //环境判断条件
        config => {
            config
            .plugin('compression')
            .use(new CompressionPlugin({
                algorithm: 'gzip',
                test: new RegExp('\.(' + ['js', 'css', 'html'].join('|') + ')$'), // 匹配文件名
                threshold: 10240, //处理小于10k文件
                minRatio: 0.8, //只有压缩率比这个值小的资源才会被处理
                deleteOriginalAssets: false //是否删除原资源
            }))
            .end()
        })
}

4、 CDN加载

/* vue.config.js */
const isProduction = process.env.NODE_ENV !== 'development' // 是否为生产环境
​
const devNeedCdn = false  // 本地环境是否需要使用cdn
​
// cdn链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
    externals: {
       vue: 'Vue',
       vuex: 'Vuex',
       vue-router: 'VueRouter'
    },
    // cdn的css链接
    css: [],
    // cdn的js链接
    js: [
       'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
       'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
       'https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js'
    ]
}
​
configureWebpack: {
    resolve: {
      alias: { // 别名配置
        '@': resolve('src')
      } 
    },
    externals: (isProduction || devNeedCdn) ? cdn.externals : {} //三元判断是否注入cdn加载
},
  
 //然后在/public/index.html中这样写：
   <!-- 使用CDN的CSS文件 -->
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
         <link  href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
   <% } %>
   <!-- 使用CDN的JS文件 -->
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
   <% } %>
     
    // 注意：删除main.js中的相应import from, 因为如果不删除，打包的时候还会把这两个文件打进去

 

5、 去除map文件

vue.config.js中设置 productionSourceMap为false，打包后就没有map文件了，减少包体积；

6、 路由懒加载

  // 第一种：vue异步组件技术

{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) };

//第二种：使用import
​
 // 下面这2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
 const Index = () => import('@/components/index')
 const About = () => import('@/components/about')
 
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// 把组件按组分块
 const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');
 const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index');

//第三中：webpack提供的require.ensure()  多个路由指定相同的chunkName，会合并打包成一个js文件
​
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') };
​
{ path: '/index', name: 'Index', component: r => require.ensure([], ()=>r(require('@/components/index')), 'demo') };
​
 // r就是resolve
 const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
​
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
      {
        path: '/list/blog',
        component: list,
        name: 'blog'
     }
    ]           
})

7、 其他

1、代码模块化：常用功能单独封装成组件，避免重复冗余代码出现，方便复用；
​
2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。
​
3、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。
​
4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。
​
5、减少图片使用，可以使用字体图标或者雪碧图开代替直接加载图片；
​
6、按需引入，比如一些第三方资源elementUI,我们可以只引入需要用到的组件，避免引入不需要使用的部分，无端增加项目体积；
    import {Input,Select} from 'element-ui';
    Vue.use(Input);
    Vue.use(Select);

 

其实还有css分包加载，但是因为现有项目不太需要，所以没加，以上就是vue优化总结，有需要的补充的请留言给我哦~