从0到1 将静态网页项目进行工程化（第二章）

前言： 上一章节，完成了对静态网页进行了代码首页以及登录页的移植，利用webpack对页面中的资源进行整合打包，解决了静态资源的路径问题,并完成了打包产物的代码分离为js、css、image等多个文件区分，最后还配置了开发环境进行自动热更新功能。以上内容可查看 从0到1 将静态网页项目进行工程化（第一章）。

第二章的目标是 性能优化，包含：

• js css 代码压缩
• treeshaking优化以及如何使用treeshaking
• 针对大文件进行分割打包
• 利用ejs对html进行复用

无工程化项目地址

https://github.com/NewCoder798/ZBestPC

第一阶段：项目webpack改造

clean-webpack-plugin

打包时自动清除无关文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

性能优化

从bundle剥离css

npm install --save-dev mini-css-extract-plugin

rules: [
      {
        test: /\.css$/,
        // use: ['style-loader', 'css-loader'],
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
  
  plugin
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].chunk.css',
    }),

代码压缩 js/css

npm i -D terser-webpack-plugin css-minimizer-webpack-plugin
// js压缩
const TerserPlugin = require('terser-webpack-plugin')
// css压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
    // 是否开启代码压缩
    minimize: true,
    // 代码优化
    minimizer: [
      // js 代码压缩
      new TerserPlugin({ parallel: true }),
      // css代码压缩
      new CssMinimizerPlugin(),
    ],
  },

treeshaking

使用tree shaking 作用是删除无用代码：

1. 必须使用ES6模块化语法 CommonJS不支持
2. 通过结构的方式获取,可以触发tree shaking
3. 同一文件的treeShaking有触发条件,条件就是mode=production
4. 一定要注意使用解构来加载模块

splitChunks 代码分割打包

在没打包之前首页加载的js文件很大，性能查。需要对index.js中的代码进行分割，主要是可以将三方库进行分割。

 optimization: {
    // 是否开启代码压缩
    minimize: true,
    // 代码优化
    minimizer: [
      // js 代码压缩
      new TerserPlugin({ parallel: true }),
      // css代码压缩
      new CssMinimizerPlugin(),
    ],
    // 代码分割
    splitChunks: {
      // 代码最小的分割大小
      minSize: 300 * 1024,
      // async 异步代码分割 initial 同步代码分割 all 同步异步代码分割都开启
      chunks: 'all',
      // 名称
      name: 'common',
      // 这里可以继续打包第三方库
      cacheGroups: {
        lodash: {
          test: /lodash-es/,
          name: 'lodash-es',
          // 优先级
          // priority:10,
          chunks: 'all',
        },
        jquery: {
          test: /jquery/,
          name: 'jquery',
          // priority: 10,
          chunks: 'all',
        },
      },
    },
  },

此时就将之前的大文件分成了三个文件。

ejs 公共代码复用

将html中头部和尾部的html代码使用ejs进行服用

npm i ejs-loader

创建ejs文件后将html复制到文件中，并在需要具体插入ejs的位置输入语法

<%=require('./ejs/header.ejs')({title: '首页123' }) %>
title支持传参 可以在ejs中进行接收    
<%=title%>
  
<%=require('./ejs/footer.ejs')() %>

以上是第一大部分的内容，接下去就是加入Vue来对项目进行进一步改造。 未完待续...