предисловие

С глобализацией Vue рамки компонентов различных Vue становятся все более и более совершенными.От раннего element-ui до vux, iview и других все более и более качественных проектов, использование Vue для построения интерфейса уже является инженерным , Модульные, гибкие вещи

Среди них, я полагаю, что многие люди выберут официальный шаблон проекта инициализации vue-cli, а затем будут разрабатывать и строить, внедряя сторонние фреймворки и инструменты компонентов.Я лично очень рекомендую этот подход. Тем не менее, шаблон проекта, инициализированный vue-cli, в конце концов, для всех разработчиков, и в совместимости будут некоторые компромиссы. Я считаю, что многие люди искали различные статьи по оптимизации построения веб-пакетов, но многие из них либо слишком стары, либо не строги.В этой статье мы надеемся достичь баланса между трудоемкой оптимизацией и повышением производительности сборки, то есть потратить наименьшее время и внести наименьшие изменения в официальный шаблон, чтобы добиться максимального повышения производительности сборки.

идеи

В эпоху более ранних версий vue-cli и webpack2 в Интернете циркулировали следующие оптимизированные конфигурации, но на самом деле новым версиям vue-cli и webpack3 это уже не нужно

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

• Включить Scope Hoisting для webpack3 (webapck3 уже настроен в новой версии vue-cli, и эта конфигурация включена по умолчанию)

• Хорошо используйте псевдоним (новая версия vue-cli проделала эту работу)

• Настройте CommonsChunkPlugin для извлечения общего кода (новая версия vue-cli сделала эту работу)

Для новой версии vue-cli и webpack3 следующая простая конфигурация может повысить скорость сборки как минимум в 2 раза после оптимизации

1. Цитирование по запросу
2. Включить проект Happack Multicore Build Project
3. Изменить конфигурацию исходной карты
4. Включить файлы предварительно скомпилированных библиотек DllPlugin и DllReferencePlugin.

упражняться

1. Цитата по запросу

1.1 Почти все сторонние платформы компонентов предоставляют компонентыЦитирование по запросуобразом, взяв в качестве примера iview, с помощью плагинаbabel-plugin-importОн может осуществлять загрузку компонентов по требованию, уменьшать размер файла и нужно только изменить.babelrcдокумент

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

1.2 Затем введите компоненты по мере необходимости, чтобы уменьшить объем

import { Button } from 'iview'
Vue.component('Table', Table)

2. Включить многоядерный проект сборки happypack

После установки happypack измените/build/webpack.base.conf.jsфайл

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool,
    })
  ]
// 修改引入loader
{
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
    include: [resolve('src'), resolve('test')]
}

3, способный изменить исходную карту

3.1 Сначала изменить/config/index.jsдокумент

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

3.2 Затем измените/src/main.jsфайл, отключите отладочную информацию для производственной среды

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4. Включите файлы предварительно скомпилированных библиотек DllPlugin и DllReferencePlugin.

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

4.1 увеличениеbuild/webpack.dll.config.jsфайл, и настройте в нем модули, требующие отдельной DLLизации

const path = require("path")
const webpack = require("webpack")

module.exports = {
  // 你想要打包的模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    // 压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

4,2 дюймаbuild/webpack.dev.conf.jsа такжеbuild/webpack.prod.conf.jsДобавьте следующие плагины

new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./vendor-manifest.json')
})

4,3 дюйма/package.jsonдобавить команду

"dll": "webpack --config ./build/webpack.dll.config.js"

4,4 дюйма/index.htmlУвеличьте внедрение DLLized JS (сначала необходимо импортировать)

<script src="/static/js/vendor.dll.js"></script>

4.5 Выполнение сборки

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

постскриптум

После того, как вышеперечисленные четыре основных шага пройдены, мы завершили оптимизацию и доработку конструкции проекта шаблона vue-cli.Хотя это еще не кажется простым, но это уже самая простая оптимизация, а есть и более замечательные навыки. , он не расширяется, потому что я думаю, что слишком много настроек оптимизации не имеет смысла, но привнесет слишком много избыточности и сложности в разработку проекта.

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

Самое главное, что простейшая конфигурация может быть легко перенастроена и использована после обновления vue-cli и webpack до новых версий в будущем, после квалифицированной настройки один раз достаточно восстановить конфигурацию заново.около 5 минутДумая, что если вы потратите 5 минут на изменение конфигурации, вы можете обменять на более чем 2-кратную скорость каждой сборки.Не правда ли, это немного увлекательно? :)

Подробнее об этом поговорим позже.На самом деле, переход с webpack2 на webpack3 довольно разочаровывает, так как он все еще принципиально не решает проблему чрезмерно сложной настройки.Как продукт, который стремится занять все веб-проекты в мире, он должен рассматривать больше с точки зрения простоты использования/удобства для человека Каждый раз, когда я смотрю на различные файлы .babelrc, .postcssrc.js... и различные файлы .conf в проекте webpack, и даже на различные файлы main, index, app, я не могу не жаловаться, почему фронт -конец конструкции так разрабатывают?Неужели в хорошем проекте обязательно иметь не один десяток конфигурационных файлов? Первоначально я думал, что webpack3 сделает все это проще, но это не так, но, поскольку пока нет возможности изменить его, что мы можем сделать, так это как можно лучше понять принцип и сделать все возможное, чтобы упростить/оптимизировать

Следовать за...

Эту статью начали писать в конце 2017 года. Что касается размышлений и обсуждения в [постскриптуме], то на самом деле идеальное решение уже было в 2018 году, т.е.parcel, хотя в отечественном поисковом поиске нет много информации, но с текущей точки зрения, это почти самое совершенное и окончательное решение для предельной конструкции. Направляясь на проблему, что конфигурация WebPack слишком избыточна и сложна, а вторжение кода сильна, посылка принимает полностью схему строительства нулевой конфигурации. Несмотря на то, что я не являюсь постоянным профессионалом в интерфейсной работе, в интернет-конце также является одним из моих великих увлечений. Я должен попробовать самые передовые результаты переднего конца. Попытка в посылку настолько поглотила, что до сих пор я переключил все свои личные проекты в интерфейсах, независимо от того, насколько большими или маленькими, в посылку наращивать и полностью заброшены WebPack. В настоящее время я с открытым исходным кодом шаблон инженерного проекта, который сочетает в себе посылку и VUEParcel-VUE Github & Официальный сайт Parcel-Vue, я надеюсь помочь большему количеству читателей, которые обеспокоены веб-пакетом или заблокированы сложной конструкцией за дверью внешнего обучения.

Спасибо за прочтение, надеюсь, эта статья поможет вам :)

Автор: Чейни Сюй о:Официальный сайт XServer