предисловие

После того, как проект Vue разработан, до того, как проект будет упакован и выпущен, важной операцией является оптимизация проекта, что также является плюсом для программистов. Следуйте инструкциям из этой статьи, чтобы узнать, как оптимизировать проект~

1. Маршрутизация ленивой загрузки

1. Зачем нужна маршрутизация отложенной загрузки?

Когда я впервые запустил проект, я обнаружил, что все файлы js и css загружаются на страницу, как только я захожу на страницу, этот процесс занимает очень много времени. Если файл js и файл css страницы ответа загружаются в соответствии с тем, какая страница открыта, скорость загрузки страницы будет значительно увеличена.

2. Как реализовать ленивую загрузку маршрутов

Официальная документация Vue:Отложенная загрузка маршрутаКод выглядит следующим образом (пример):

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

3. Волшебные аннотации в маршрутизации отложенной загрузки

указав в комментарииwebpackChunkName, вы можете настроить имя этого файла. Код выглядит следующим образом (пример):

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")

Во-вторых, размер пакета анализа

1. Спрос

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

2. Как создать файлы анализа упаковки

запустить в терминалеnpm run preview -- --report, эта команда начнется с нашей записиmain.jsАнализ зависимостей выполняется для анализа размера каждого пакета. в конечном итоге сгенерируетdistсоздать папкуreport.htmlПосле открытия файла вы можете увидеть размер пространства, занимаемого файлами, которые мы используем в проекте~

(Изображение эффекта выглядит следующим образом:) 在这里插入图片描述

3. Конфигурация Webpack исключает упаковку

1. Спрос

Исключите некоторые необычные пакеты из сгенерированного файла пакета. Например: xsxl.js и element.js, показанные на рисунке выше, можно исключить из упакованных файлов.

2. Исключить упаковку

оказатьсяvue.config.js, Добавить кexternalsпредметы следующим образом:

Код выглядит следующим образом (пример):

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
     /**
      * externals 对象属性解析。
      *  基本格式：
      *     '包名' : '在项目中引入的名字'
      *  
    */
    'vue': 'Vue',
    'element-ui': 'ElementUI',
    'xlsx': 'XLSX'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

4. Ссылки на сетевые ресурсы

1. Спрос

После того, как мы выполнили предыдущий шаг, пакет, созданный после упаковки, стал намного меньше. Однако без этих пакетов зависимостей невозможно запустить проект онлайн. Затем нам нужно сослаться на ресурсы в сети для поддержки работы нашего кода.

2. CDN

CDNПолное название — «Сеть доставки контента», что на китайском языке называется «Сеть доставки контента».Сеть доставки контента. мы используем его дляУлучшить скорость доступа
Поместите некоторые статические ресурсы: css, .js, изображения, видео на сторонний сервер CDN,Может ускорить доступ.

выгода:

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

3. Этапы реализации

注意: В среде разработки файловые ресурсы по-прежнему можно загружать с локальногоnode_modulesТолько когда проект находится в сети, ему нужно использовать внешние ресурсы. В этот момент мы можем использоватьпеременная средыотличить. детали следующим образом:

Код выглядит следующим образом (пример):

существуетvue.config.jsВ файле:

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析：
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

конфигурация веб-пакетаexternalsэлемент конфигурации

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

пройти черезhtml-webpack-pluginвводить вindex.htmlСреди: существуетvue.config.jsКонфигурация в файле:

chainWebpack(config) {
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  // 省略其他...
}

оказатьсяpublic/index.htmlпо конфигурацииCDN ConfigВнедряйте css и js по очереди. Измените содержимое заголовка следующим образом:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
        <% } %>


    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
    <% } %>
  </head>

5. Упаковать и удалить console.log

1. Спрос

После того, как проект упакован и запущен, удалите весь код в кодеconsole.log

2. Демонстрация кода

существуетvue.config.jsКонфигурация в файле: Код выглядит следующим образом (пример):

chainWebpack(config) {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
}

Суммировать

Бонусный предмет для программистов~ Тем, кто не умеет быстро собирать!