webpack

1. dll 动态链库配置

避免打包三方库，加快构建速度

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

// webpack.dll.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 你想要打包的模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js', 'vuex', 'axios', 'vue-router'],
  },
  output: {
    path: path.join(__dirname, './public/static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library',
    // vendor.dll.js中暴露出的全局变量名。
    // 主要是给DllPlugin中的name使用，
    // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library', // 以上都是不需要改动的库 所以不需要加入hash值
      context: __dirname,
    }),
  ],
};

// index.html
<script src="<%= BASE_URL %>static/js/vendor.dll.js"></script>

2. 模块懒加载

const Home = () => import(/* webpackChunkName: "home" */ './index.vue');

3. 配置别名

    config.resolve.alias
      .set('@store', resolve('src/store'))
      .set('@components', resolve('src/components'))
      .set('@assets', resolve('src/assets'))
      .set('@utils', resolve('src/utils'));

4. 去除 console.log

        new TerserPlugin({
          terserOptions: {
            ecma: undefined,
            warnings: true,
            parse: {},
            compress: {
              drop_console: false,
              drop_debugger: false,
              pure_funcs: ['console.log'],
            },
          },
        }),

6. autoprefixer 自动增加 css3 浏览器前缀

// .postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

// package.json
  "browserslist": [
    "> 1%",
    "last 3 versions",
    "not ie <= 8",
    "chrome >= 14",
    "safari >= 3",
    "ios >= 8",
    "android >= 4.0"
  ]

7. splitChunks 代码分割，提取公共模块

      splitChunks: {
        chunks: 'async',
        minSize: 10000, // 模块的最小体积
        minChunks: 1, // 模块的最小被引用次数
        maxAsyncRequests: 5, // 按需加载的最大并行请求数
        maxInitialRequests: 3, // 一个入口最大并行请求数
        automaticNameDelimiter: '~', // 文件名的连接符
        name: true,
      },

8.小图片转成base64格式

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        limit: 1024,  //小于该值的图片会使用base64编码
        name: '[name].[hash:8].[ext]'  //打包后的图片名称 [ext]指图片格式
    }
}

9.css抽成一个, 并增加contentHash，减少http请求次数

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 新增
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    chunk1: "./src/chunk1.js"
  },
  output: {
    filename: "[name].[chunkhash].js"
  },
  module: { // 新增
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          "css-loader"
        ]
      }
    ]
  },
  plugins: [ // 新增
    // 提取css插件
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].[contenthash].css"
    })
  ]
};

10.多进程打包（thread-loader）

在编译花费时间较长时才需要使用 thread-loader，因为这个 loader 启动和通信都是有开销的，如果时间较短，使用这个 loader 就得不偿失了。

// "thread-loader"放在babel-loader前，就会在babel-loader工作时进行多进程工作。
{
    loader: "thread-loader",
    options: {
        workers: 2, // 启动进程个数，默认是电脑cpu核数-1
    },
},
{
    loader: "babel-loader",
    options: {
        presets: [
            [
                "@babel/preset-env",
            ],
        ],
    },
},

Vue

避免数据响应式

不会变的数据可以用 Object.freeze 冻结，避免响应式处理，浪费性能

路由懒加载，组件懒加载（异步组件），Vuex 懒加载

避免过多的使用 this.xxx 来读取数据

this.xxx 将进入数据响应式中的 getter 数据读取相关逻辑运算，消耗性能，如果是 computed 的话可以传参

computed 和 watch 区别使用

v-if 和 v-show 区别使用

v-for 避免和 v-if 一起使用，且绑定 key 值要唯一

列表数据过多采用分页或者虚拟列表

组件销毁后清除定时器和事件

按需引入外部库

keep-alive缓存使用

服务端渲染和预渲染