前言

最近自己買個云服務(wù)器,把之前搭建的webpack-vue項目進行了部署,現(xiàn)在項目已經(jīng)成功了。

項目地址:GitHub - wjt162286793/webpack----vue: 使用webpack配置一個腳手架,對照文檔,純手打

?線上地址:IAM架構(gòu)資產(chǎn)管理系統(tǒng)

不過是沒有經(jīng)過任何優(yōu)化的,雖然項目體積和業(yè)務(wù)不是很復(fù)雜,但是實際上打完包后體積也是比較大,首次加載也是需要請求大資源文件,導(dǎo)致項目加載很慢,而且還有很多console.log的內(nèi)容在控制臺上,效果如下

我這個項目最多算一個中小型,現(xiàn)在的包就87MB那么大,我在線上部署了一下,白屏16秒......

本文主要針對webpack進行優(yōu)化,版本為webpack5,并不對業(yè)務(wù)代碼本身進行優(yōu)化,因為本身業(yè)務(wù)代碼也不是特別的多,編寫的時候也是注重代碼的結(jié)構(gòu)的

優(yōu)化

1.拆包

用webpack打包后,vendors.js是所有當前項目中所有的依賴包和業(yè)務(wù)代碼的綜合,我們就要想辦法讓vendors包的提交大大縮減

(1)將每個業(yè)務(wù)組件分成單獨的js文件

在配置路由時,我們可以使用懶加載和webpackChunkName,將每個路由組件都生成小包,脫離掉vendors.js

 {
   path: '/dashboard/business/businessList',
   name: 'businessList',
   meta: {
       name: '列表'
    },
   component: () => import(/* webpackChunkName:'businessList'*/ 'pages/business/components/businessList.vue')
    },

(2)使用externals篩除依賴包,改用cdn服務(wù)加載

注意:如果用戶是可以連接到互聯(lián)網(wǎng)的情況下,可以這樣使用。如果用戶是無法訪問互聯(lián)網(wǎng)和對應(yīng)cdn地址的,就不可以這樣去做了。

externals配置

當你使用了externals之后,里面配置的包就不會出現(xiàn)在打包中

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

在項目中,我們引入的方式必須要要和這里面的一致

key是包名,value是這個包默認導(dǎo)出的名字(!!!一定要寫對)

例如:vue3就沒有導(dǎo)出vue,而是import {creatApp} from 'vue'

我們這里就要寫成這個樣子

//原來的寫法
//import {createApp} from 'vue'

const Vue = require('vue')
import Main from './main.vue'
export const mainVue = Vue.createApp(Main)

其他同理

cdn的使用

如果我們使用externals排除了某個包,就需要在index.html中引入cdn地址。

這里注意,cdn的包地址一定要引對。

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.global.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.16/vue-router.global.prod.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

這里有一個很簡單的測試方法,你去cdn地址上將代碼復(fù)制下來,在本地去測一下,看能不能成功使用你在externals中使用的包類名

?

?如果不能對的上,那你發(fā)到生產(chǎn)上就會報錯

所以,找cdn的地址一定要找對

2.ui組件庫的處理

大部分項目都會用到ui組件庫,如element-ui或者element-plus,echarts等等

這里有一個原則,如果你的項目中基本把這個組件庫的絕大多數(shù)組件都用了,那你就可以直接將這個組件庫也用cdn的形式引用了。如果沒有的話,那你就是用按需引入的方式去引入該ui組件庫

大部分的組件庫都給提供了按需引入的方式,對照著文檔操作就可以了

3.依賴包的抽取

比如一個包在多個文件中使用,我們只需要抽取一次就可以了,這樣也可以減除很多的冗余代碼

    optimization: {
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },

4.使用gzip壓縮

const CompressionPlugin = require('compression-webpack-plugin');

  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip', // 使用gzip算法進行壓縮
      test: /\.(js|css)$/, // 需要壓縮的文件類型
      threshold: 10240, // 文件大小大于10KB才會被壓縮
      minRatio: 0.8, // 壓縮比例達到0.8才會被壓縮
      deleteOriginalAssets: false, // 是否刪除原始文件
    }),
    //...
  ],

使用了gzip之后,打包后的文件就會生成.gz的壓縮文件,也是常見有效的優(yōu)化,能是構(gòu)建包更輕量

5.生產(chǎn)環(huán)境去掉debug,注釋,打印語句

const TerserPlugin = require('terser-webpack-plugin');

  optimization: {
    //生產(chǎn)環(huán)境上干掉所有的js注釋和日志
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,   //刪除注釋
          },
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']//刪除打印語句
          }
        },
        extractComments: false,

      }),
    ],
  },

6.生產(chǎn)環(huán)境去除sourceMap

在開發(fā)的時候,我們?yōu)榱朔奖悴檎义e誤,配置了soureMap。

但是在打包構(gòu)建的時候,就需要關(guān)閉sourceMap了。其一是可以不打包map文件減少體積,其二是可以避免源碼泄露。

在配置中加一行

devtool: false

7.對其他靜態(tài)資源的壓縮

在打包時,js文件會默認壓縮。但是很多靜態(tài)文件之類的不會,特別是圖片等資源。

這里我就不在文檔中寫具體怎么操作了,網(wǎng)上一搜一大把。后續(xù)我會在webpack系列中對各種plugin進行演示

結(jié)果

現(xiàn)在我在打包一次,可以看看效果

?

?效果也是很明顯的

項目地址

特意說明一下:現(xiàn)在項目也只是完成了初版的,后續(xù)還有東西要往里面寫。優(yōu)化還有一些提升的空間

業(yè)務(wù)也都是模擬的假業(yè)務(wù),是為了技術(shù)練習,沒有任何的實際意義,也沒有侵犯任何單位的行為。

項目地址:GitHub - wjt162286793/webpack----vue: 使用webpack配置一個腳手架,對照文檔,純手打

線上地址:IAM架構(gòu)資產(chǎn)管理系統(tǒng)

感覺有用的在github上給個star吧!文章來源地址http://www.zghlxwxcb.cn/news/detail-812553.html

到了這里，關(guān)于前端項目優(yōu)化:減少webpack打包體積的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！