✍️述-性能优化

站在前端的角度进行性能优化是最近的项目中遇到的，自己着手去优化

的只有简单的几个点，当我自己去发掘大家「前辈们」是怎么做的，才发现，

又是一个新世界。

Link

📖1. gzip压缩

 # 开启gzip
 gzip on;
 # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
 gzip_min_length 1k;
 # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
 gzip_comp_level 1;
 # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
 # 是否在http header中添加Vary: Accept-Encoding，建议开启
 gzip_vary on;
 # 禁用IE 6 gzip
 gzip_disable "MSIE [1-6]\.";

1
2
3
4
5
6
7
8
9
10
11
12

📖2. webpack

webpack作为如今前端稳定，健全的工程化打包工具，基本可以满足日常开发遇到的所有问题。

那么，通过打包时的合理化配置plugins可以起到不错的效果

// Tips: 使用飞冰进行开发，在根目录新建.webpackrc.js返回函数配置可覆盖项目的webpack配置

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = (context) => {
  const { webpack } = context;

  // config
  return {
    // ...
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src/'),
        '@util': path.resolve(__dirname, 'src/util/'),
        '@components': path.resolve(__dirname, 'src/components/'),
        '@pages': path.resolve(__dirname, 'src/pages/'),
        '@models': path.resolve(__dirname, 'src/models/'),
        '@config': path.resolve(__dirname, 'src/config/')
      }
    },
    plugins: [
      // new BundleAnalyzerPlugin(), // analyzer
      // new UglifyJSPlugin() // 优化js,取消注释打印等
    ]
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

🍵1. BundleAnalyzerPlugin

Analyzer

BundleAnalyzerPlugin() 分析打包后的bundle.js所含有的成分，便于取舍分析

🍵2. UglifyJSPlugin

UglifyJSPlugin() 压缩js,取消注释，美化代码，生成sourcemap便于调试

📖3. coding - LazyLoad

首屏加载时间一直以来都会作为很重要的评估指标，而使用懒加载则可以很好的进行优化

# ✍️述-性能优化

# 📖1. gzip压缩

# 📖2. webpack

# 🍵1. BundleAnalyzerPlugin