задний план
Для разработчиков программ при разработке проекта важны не только эффективность и функциональность, но и вопросы производительности внешнего интерфейса. Это напрямую влияет на пользовательский опыт, что косвенно отражает качество проекта. Существует множество причин, влияющих на производительность проекта, таких как: размер файла ресурсов, сложность бизнеса и т. д., поэтому существует множество способов оптимизации фронтенда. Они фрагментарны и легко забываются. Поэтому в этой статье суммированы методы оптимизации, которые я обычно использую.Это может быть не слишком исчерпывающе.Если у вас есть другие методы оптимизации, вы можете оставить сообщение и пообщаться друг с другом. Не говори, просто напиши. .
Оптимизация 1: отложенная загрузка маршрутизации vue-router
懒加载：Его еще называют ленивой загрузкой, то есть он загружается тогда, когда это нужно, и загружается по мере необходимости.
Причины использования ленивой загрузки:vueпредставляет собой одностраничное приложение, использующееwebpcakУпакованный файл очень большой, что приведет к загрузке слишком большого количества ресурсов при входе на домашнюю страницу, и на странице появится белый экран, что не способствует работе пользователя. После использования отложенной загрузки страницы можно загружать по запросу, чтобы улучшить взаимодействие с пользователем.
Ленивый метод загрузки:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: resolve => require(['@/components/DefaultIndex'],resolve),
children: [
{
path: '',
component: resolve => require(['@/components/Index'],resolve)
},
{
path: '*',
redirect: '/Index'
}
]
})
Конфигурация маршрутизации без ленивой загрузки:
import Vue from 'vue'
import Router from 'vue-router'
import DefaultIndex from '@/components/DefaultIndex'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: 'DefaultIndex ',
children: [
{
path: '',
component: 'Index'
},
{
path: '*',
redirect: '/Index'
}
]
})
Оптимизация 2: веб-пакет сжимает изображения (уменьшает размер изображения)
Обычно вvueиспользуется в проектеwebpackПри упаковке, согласноwebpack.base.conf.jsсерединаurl-loaderустановить вlimitразмер для обработки изображений, для изображений меньше, чемlimitизображения преобразуются вbase64формате, остальные не работают. Таким образом, для некоторых больших ресурсов изображений при запросе ресурсов загрузка будет очень медленной, вы можете использоватьimage-webpack-loaderдля сжатия изображения.
Установить:
npm install image-webpack-loader --save-dev
Конфигурация:
существуетwebpack.base.conf.jsКонфигурация представлена в файле (для сборки этого проекта я использовал строительные леса, поэтомуwebpack.base.conf.js)
1: 引入：
require("image-webpack-loader")
2：配置：
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
}
}
},
或者也可配置为：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
}
}
]
}
Оптимизация третья: js после того, как пакет слишком большой, в пакете несколько файлов js
из-заwebpackупакованныйjsНастолько большой, что загрузка ресурса занимает слишком много времени. Поэтому упакуйте файл в несколькоjsфайлы, которые загружаются по запросу, когда это необходимо.
Оптимизация:
entry:{
main:'xxx.js'
}
plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:function(module){
// 下边return参考的vue-cli配置
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}) ,
// 以下才是关键
new commonsChunkPlugin({
name:'charts',
chunks:['commons']
minChunks:function(module){
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
)
}
})
}
Оптимизация 4: удалить ненужные плагины
1: При упаковке некоторые ненужные плагины могут быть удалены, чтобы предотвратить упаковку некоторых бесполезных ресурсов, в результате чего упакованные файлы слишком велики и влияют на производительность.
2: При внедрении стороннего плагина, если плагин слишком велик, вы можете ввести его по требованию, напримерelement-ui.
3: использоватьwebpack.optimize.UglifyJsPluginОбфускация сжатия плагинаjsкод, метод использования следующий:
plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({ warnings: false,
compress: {
join_vars: true,
warnings: false,
},
toplevel: false,
ie8: false,
]
Оптимизация пятая: сжатие gzip
Для интерфейсных веб-проектов статические ресурсы размещаются вcdnещеgzipКомпрессия очень нужна, она напрямую изменяетjsРазмер файла уменьшается в два-три раза.
Ссылаться наУскоряем nginx: включаем gzip и кеширование,nginxизgzipКонфигурация очень проста, под соответствующим доменным именем добавьте следующую конфигурацию и перезапустите службу.gzip_comp_levelзначение больше, чем2не очевидно, рекомендуется установить1或者2между.
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
Я никогда не использовал этот метод, если вы использовали его, вы можете оставить сообщение и общаться.
Оптимизация шестая: кэш сервера
Чтобы повысить скорость получения сервером данных,nginxОчень необходимо кэшировать статические ресурсы. Если это тестовая пара серверовhtmlне следует устанавливать кеш, иjsДождитесь среды статических ресурсов, поскольку она будет добавлена в конец файла.hashзначение, которое может эффективно реализовать управление кешем.
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
access_log off;
expires 30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_log off;
expires 24h;
}
location ~* ^.+\.(html|htm)$ {
expires 1h;
}