从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 作用是删除无用代码:
- 必须使用ES6模块化语法 CommonJS不支持
- 通过结构的方式获取,可以触发tree shaking
- 同一文件的treeShaking有触发条件,条件就是mode=production
- 一定要注意使用解构来加载模块
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来对项目进行进一步改造。 未完待续...
转载自:https://juejin.cn/post/7349101755090518043