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優化總結，有需要的補充的請留言給我哦~