предисловие
привет, увидимся снова~~ хи хи. На этот раз я в основном буду говорить о проблеме оптимизации упаковки. Проект Vue должен пройти процесс упаковки от разработки до запуска.От того, упакован проект или оптимизирован, зависит скорость работы и взаимодействие с пользователем вашего проекта. Это время в основном дляvue.config,jsконфигурация оптимизирована.адрес проекта
Среда разработки и производственная среда
Настройка среды разработки и производственной среды также является неотъемлемой частью разработки. Этот проект сделанvue-cli3развивать,vue-cli3глубоко интегрированныйwebpack, если не знакомvue-cli3может идти первымОфициальный сайтВзгляните на соответствующую конфигурацию.
среда разработки
Создайте новый проект в корневом каталоге проекта.env.developmentФайл указывает на среду разработки.
VUE_APP_CURRENTMODE ="development" //当前的环境
VUE_APP_LOGOUT_URL="http://localhost:3000/" //开发环境的地址
Производственная среда
Создайте новый проект в корневом каталоге проекта.env.productionВ документации указана производственная среда.
VUE_APP_CURRENTMODE ="development" //当前的环境
VUE_APP_LOGOUT_URL="xxx" //生产环境的地址
Конечно, вы также можете сами создать тестовую среду..env.test, также можно настроить, как указано выше.
Экологическое использование
Итак, как мы будем использовать его дальше? Тут надо сказать, чтоpackage.jsonДве команды внутриserve,build, на самом деле соответствующая полная командаvue-cli-service serve --mode development,vue-cli-service build --mode production, если вы хотите использовать переменные среды разработки в команде сборки, вы можете добавить
"dev-build": "vue-cli-service build --mode development"
следующий вvue.config.jsиспользуй это.
config.plugin('define').tap(args => {
args[0]['process.env'].VUE_APP_LOGOUT_URL = JSON.stringify(process.env.VUE_APP_LOGOUT_URL)
console.log(args[0])
return args;
});
Здесь необходимо сказать, что этот код написан наchainWebpackпод элементами конфигурации. Этот код фактически использует дваwebpackплагинwebpack-chainпозволяет настраивать связанные операции иwebpack.DefinePlugin.
- webpack-chain: Попытка создать и изменить конфигурации webpack, предоставив цепочку или нижестоящий API.понять больше
- webpack.DefinePlugin: его роль заключается в определении глобальных констант, которые являются константами. т.е. глобальная константа, определенная в модуле с ним, то вы не можете ее изменить. То есть я определяю
process.env.VUE_APP_LOGOUT_URLпостоянный, вsrcМожно использовать следующие папки.понять больше
разделение кода
Прежде всего, подумайте, какие проблемы возникнут, когда внедряемые нами сторонние пакеты будут упакованы с нашим бизнес-кодом?
Как следует из названия, наш бизнес-код часто меняется, и представленная нами третья сторона не изменится. В браузере будет кеш, и никакие изменения не будут считываться напрямую из кеша, который косвенно оптимизирован под скорость доступа к сайту.
Следующая конфигурацияvue.config.js,
Разделить сторонние библиотеки
//代码分割
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: 'all',
cacheGroup:{
//vue2-editor单独打一个包
vueEdior: {
name: 'vueEdior',
test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
priority: 10 // 优先级要大于 vendors 不然会被打包进 vendors
},
//其余的第三方包打进vendor
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
})
Разделить общие файлы
Компоненты являются важной частью проекта vue. Значительная часть компонентов может быть общей и представлена в разных файлах, поэтому мы можем напрямую разделить эти общие компоненты.
config.optimization.minimize(true);
config.optimization.splitChunks({
chunks: 'all',
cacheGroup:{
vueEdior: {
name: 'vueEdior',
test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
priority: 10 // 优先级要大于 vendors 不然会被打包进 vendors
},
public: {
name: 'public',
test: resolve('src/components'),
minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb
minChunks: 2, // 最小公用次数
priority: 5, // 优先级
reuseExistingChunk: true // 公共模块必开启
},
//其余的第三方包打进vendor
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
}
}
})
После упаковки вы найдетеdist/static/js, один дополнительныйvueEditorа такжеpublicФайл, который показывает сегментацию завершено.
Обработка файлов карты и псевдоним (псевдоним)
файл карты
Мы можем дополнительно оптимизировать и упаковать файл карты по умолчанию, что приведет к тому, что пакет будет слишком большим.На данный момент нам нужно установить свойство, чтобы отключить его.
productionSourceMap: false
Настройки псевдонима
aliasПреимущество его использования в том, что нет необходимости искать один уровень, а напрямую блокировать местоположение, тем самым сокращая время поиска файла.
//设置别名
config.resolve.alias
.set('@', resolve('src'))
.set('@api', resolve('src/api/api'))//接口地址
.set('@assets', resolve('src/assets'))
сжатие gzip и перейти к консольному плагину
Если вышеперечисленные методы написаны, файл все еще слишком велик. В это время вы должны рассмотреть сжатие кода и удалить консольный плагин. Можно сказать, что для оптимизации проекта «все можно сделать» .
gzip-сжатие
первая установка начать установку
cnpm install compression-webpack-plugin --save-dev
затем вconfigureWebpackнастроить его внутри
const CompressionWebpackPlugin = require('compression-webpack-plugin')
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
['js', 'css'].join('|') +
')$',
),
threshold: 10240,
minRatio: 0.8,
}),
Стоит отметить, чтоgzipДля сжатых файлов требуется внутренняя поддержка. Если серверная часть не поддерживает это, проект по-прежнему будет загружать несжатые файлы.
перейти к консольному плагину
Установить первым
cnpm install uglifyjs-webpack-plugin --save-dev
затем вconfigureWebpackнастроить его внутри
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
}),
cdn импорт
Некоторые студенты говорят, что бэкэнд не поддерживаетgzipСжато и загружено, что делать?Есть только холодный салат~~~.
Вот способ представить cdn. Некоторые сторонние плагины слишком велики, поэтому они все еще довольно велики после отдельного субподряда. В настоящее время вы можете рассмотреть возможность использования cdn для импорта файлов.
Представляем cdn без плагинов
Во-первых, мы не разрешаем импортировать файлы пакетов webpack с помощью cdn.
//对一些不经常改动的库，可以通过cdn引入，webpack不对他们打包
let externals = {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'echarts': 'echarts',
'vue2-editor': 'VueEditor'
}
Затем настройте cdn
const cdn = {
css: [
//element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
],
js: [
//vue
'https://unpkg.com/vue@2.6.10/dist/vue.min.js',
//axios
'http://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
//vuex
'https://unpkg.com/vuex@3.1.0/dist/vuex.min.js',
//vue-router
'https://unpkg.com/vue-router@3.0.6/dist/vue-router.min.js',
//element
'https://unpkg.com/element-ui@2.7.2/lib/index.js',
//echarts
'https://cdn.jsdelivr.net/npm/echarts@4.2.1/dist/echarts.min.js',
//vue2-editor
"https://unpkg.com/vue2-editor@2.6.6/dist/vue2-editor.js"
]
}
следующий вchainWebpackнастроить
process.env.VUE_APP_CURRENTMODE === 'production') {
config.externals(externals)//忽略打包
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args
})
}
Здесь нужно пояснить, чтоconfig.plugin('html')Фактически используетсяhtml-webpack-pluginплагин в его экземпляреoptionsустанавливатьcdnобъект, а затем передатьejsСинтаксис шаблона, читайте соответствующий cdn.
Далее нам нужноpublic/index.htmlПрочитайте соответствующий cdn в
<% if (process.env.VUE_APP_CURRENTMODE === 'production') { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<% } %>
На этом знакомство с cdn завершено.
Плагин вводит cdn
Поскольку это слишком хлопотно, чтобы вручную вручную ввести CDN, и вы беспокоитесь о изменениях версии, вам нужно вручную изменить его каждый раз, поэтому для лучшего опыта разработки автоматического списка CDN вводится.webpack-cdn-plugin. Далее запускаем установку
cnpm install webpack-cdn-plugin --save
Создать экземпляр плагина
const cdnPlugin = require('webpack-cdn-plugin')
Следующий старт вconfigureWebpackцитируется в
new cdnPlugin({
modules: [
{ name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
{ name: 'axios', var: 'axios', path: 'dist/axios.min.js' },
{ name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' },
{ name: 'element-ui', var: 'ELEMENT', path: 'lib/index.js', style: 'lib/theme-chalk/index.css' },
{ name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' },
{ name: 'vue2-editor', var: 'VueEditor', path: 'dist/vue2-editor.js' },
{ name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' },
],
publicPath: '/node_modules'
})
- имя: имя плагина
- var : имя экземпляра в проекте
- путь: имя пути
- стиль: имя пути css
Для получения дополнительной информации см.официальная документация.
В общем, введение третьих лицcdnОн действительно может принести хорошие результаты, но может быть нестабильным, поэтому рекомендуется подавать заявку на эксклюзив в актуальной разработке.cdnДоменное имя, загрузите библиотеку, используемую сайтом напрямую.
Эпилог
Оптимизация упаковки этого выпуска уже здесь! Такое ощущение, что много глупостей. Ха-ха~~, наконец, спасибо за внимание.Если есть какие-либо проблемы или ошибки, пожалуйста, исправьте их вовремя.
Статьи по Теме
Построить фоновую структуру элемента от 0 до 1
Разрешение на создание каркаса фона элемента от 0 до 1