Решение для оптимизации размера пакета Vue

Vue.js

Оптимизация упакованного тома Vue-cli3

Предисловие:

После того, как проект компании завершен, после завершения пакета остается 1,18 МБ. На самом деле, это нормально, но все еще есть области для оптимизации. Для нас, чтобы дух совершенства (есть еще немного *) для оптимизировать можно сначала в проекте установкаwebpack-bundle-analyzerВы можете увидеть размер каждого файла

npm install webpack-bundle-analyzer -save-dev
Настроить в vue.config.js
module.exports = {
    chainWebpack: config => {
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
    }
}

Выполните npm run build или npm run serve, и появится этот причудливый интерфейс для анализа размера файла.

анализировать

Перед оптимизацией vendor~app.xxxx.js имеет 1,18 МБ, мы можем проверить размер каждого пакета и оптимизировать его соответствующим образом.

оптимизация

  • Загрузка CDN

    Для vue, vue-router, vuex, axios и т. д. можно загрузить с CDN в производственной среде.

    const externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios'
    }
    const cdn = {
      css: [],
      js: [
        'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
        'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
        'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
       'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
      ]
    }

    module.exports = {
      chainWebpack: config => {
          config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          config.plugin('html').tap(args => {
          if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn
          }
          return args
        })
      },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
              externals: externals,
            };
         }
      },
    }

    Затем измените файл pubilc/index.html.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.png">
      <!-- 使用CDN的CSS文件 -->
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
      <% } %>
      <!-- 使用CDN的JS文件 -->
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
        <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
      <% } %>
      <title>上海比户</title>
    </head>
    <body>
      <noscript>
        <strong></strong>
      </noscript>
      <div id="app"></div>
      <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
      <% } %>
    </body>
    </html>

    Глядя на картинку уже больше 700к, прямо уменьшено более чем на 400к

  • Отложенная загрузка маршрута

    Когда пакет упакован, пакет JavaScript станет особенно большим, что повлияет на загрузку страницы.Если мы добавим этот модуль при доступе к маршруту, то изменение будет очень эффективным, измените метод статического введения на метод динамического введения.

    import ComponentA from '../page/components/ComponentA';
    routeList = [
        {
          path: '/comA',
          component: ComponentA
        },
    ]

    //改为
    routeList = [
        {
          path: '/comA',
          component: () => import('../page/components/ComponentA')
        },
    ]

    Поскольку в моем проекте с самого начала используется ленивая загрузка маршрутизации, я не вижу изменения размера упакованного файла, но, вероятно, размер уменьшится на 300 КБ.

    В vue cli3 нам также нужно удалить вручнуюprefetch,Preload, так как он упоминается в официальной документации vue cli, о нем можно узнать, я примерно резюмировал.

    То есть при загрузке первого экрана все файлы роутинга будут загружаться одновременно, что приведет к более запрашиваемому контенту при загрузке первого экрана, и загрузка первого экрана будет медленнее. следует

    module.exports = {
      chainWebpack: config => {
          config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
           config.plugin('html').tap(args => {
           if (process.env.NODE_ENV === 'production') {
              args[0].cdn = cdn
           }
           return args
         })
          // 移除 prefetch 插件
          config.plugins.delete('prefetch')
          // 移除 preload 插件
          config.plugins.delete('preload');
      },
      configureWebpack: config => {
          if (process.env.NODE_ENV === 'production') {
             return {
               externals: externals,
             };
          }
      },
    }

  • element-ui загружается по запросу

    Глядя на пакет element-ui/lib, он составляет две трети от общего размера пакета, 554 КБ, а общий размер пакета составляет более 700 КБ, поэтому, если вы загружаете element-ui по требованию, вы можете уменьшить размер и загрузить этот пакет по запросу, не говори, будет~😝

    Но его нужно добавить в файл babel.config.js (компонент babel-plugin нужно установить в vue cli3)

    module.exports = {
        presets: ['@vue/app'],

       //加上这~
       plugins: [
          [
            'component',
            {
              libraryName: 'element-ui',
              styleLibraryName: 'theme-chalk'
            }
          ]
       ]
    };

  • gzip

    Установите сжатие-webpack-плагин

    nmp i compression-webpack-plugin -D

    Представлено в vue.config.js

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

    module.exports = {
        chainWebpack: config => {
            config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
             config.plugin('html').tap(args => {
               if (process.env.NODE_ENV === 'production') {
                 args[0].cdn = cdn
               }
               return args
            })
            // 移除 prefetch 插件
            config.plugins.delete('prefetch')
            // 移除 preload 插件
            config.plugins.delete('preload');
          },
          configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
              return {
                externals: externals,
                plugins: [
                  //gzip压缩
                  new CompressionPlugin({
                    test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据压缩
                    deleteOriginalAssets: false //不删除源文件
                  })
                ],
                performance: {
                  hints: false
                }
              };
           }
        },
    }

    Как вы можете видеть на рисунке выше, самый большой файл после сжатия gzip составляет всего 140 КБ.

    Но его еще нужно настроить на стороне сервера

  • импорт файла scss

    Мы обычно извлекаем файл scss, какие-то общие стили, темы и т.д., а потом будет громоздко внедрять в каждый нужный компонент, можно использовать scss-loader для препроцессинга

    Например, у нас есть файл resetTable.scss, который можно добавить в vue.config.js.

    module.exports = {
        chainWebpack: config => {
           config
           .plugin('webpack-bundle-analyzer')
           .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
           config.plugin('html').tap(args => {
             if (process.env.NODE_ENV === 'production') {
                args[0].cdn = cdn
              }
              return args
            })
            // 移除 prefetch 插件
            config.plugins.delete('prefetch')
            // 移除 preload 插件
            config.plugins.delete('preload');
          },
        configureWebpack: config => {
           if (process.env.NODE_ENV === 'production') {
             return {
               externals: externals,
               plugins: [
                 //gzip压缩
                 new CompressionPlugin({
                   test: /\.js∣¨E92E.html|\.html∣¨E92E.html|.\css/, //匹配文件名
                   threshold: 10240, //对超过10k的数据压缩
                   deleteOriginalAssets: false //不删除源文件
                 })
               ],
               performance: {
                 hints: false
               }
            };
          }
       },
       // scss设置
       css: {
         loaderOptions: {
           sass: {
             //我是放在 assets/commcss 目录下
             data: '@import "@assets/commcss/resetTable.scss";'
           }
         },
       },
    }

    На картинке выше показана полная конфигурация vue.config.js~

Суммировать:

​ Выше приведены моменты, которые я оптимизирую в проекте в настоящее время, но должны быть и другие места оптимизации, которые можно обсудить друг с другом.

Встречать ветер, обнимать радугу и смело идти вперед~ 😬
Категории