1. 对于CSS样式的优化
1.1 提取CSS样式
1.1.1 提取样式文件说明
- 之前的打包是利用
css-loader将样式文件处理为模块,打包到JS中 - 在通过
style-loader将样式代码从JS中抽离,并且在html文件中创建style标签,插入样式代码
这样处理缺点
- 将所有的样式文件打包到js中,会增加JS代码的体积,JS体积过大,会导致加载数据变慢
- 将样式从JS中抽离出来,在嵌入到style标签中,可能会发生闪屏的问题
因此:
我们需要将样式文件打包问单独的样式文件
1.1.2 配置插件提取样式
说明:
- 既然是将样式抽离为单独的文件,那么也就不需要使用
style-loader了 - 使用
mini-css-extract-plugin插件处理 - 并且使用
mini-css-extract-plugin插件自带的loader将样式从JS模块中抽离出来
代码:
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 提取css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const {resolve} = require("path")
module.exports = {
entry:"./src/main.js",
output: {
filename:"bundle.js",
path: resolve(__dirname,"dist")
},
module:{
rules:[
{
test: /\.css$/,
use:[
// 创建style标签,将样式从js中取出加入的style标签里
// "style-loader",
// 取代style-loader,将js中的样式单独生成文件
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
}),
new MiniCssExtractPlugin({
// 对提出的css进行重命名
filename: "css/build.css"
})
],
mode:"development"
}
1.2. CSS的压缩
使用optimize-css-assetso-webpack-plugin插件将打包后的css文件进行压缩
1.2.1 下载并导入插件
下载插件
$ yarn add optimize-css-assets-webpack-plugin -D
导入插件
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
1.2.2 使用插件
webpack.config.js文件中
plugins:[
new OptimizeCssAssetsWebpackPlugin()
],
2. webpack处理JS语法转换
2.1. JS语法转化说明
说明:
- 我们平时开发大多会选择使用ES6的语法进行开发
- 但是有部分浏览器没发直接识别ES6的语法,如IE
- 因此我们开发时使用ES6语法,但是代码上线需要转为浏览器能识别的ES5的语法
- 故而我们需要在webpack进行配置,打包时自动进行语法转化
2.2 对于ES6语法进行转换
说明:
- 使用
babel-loader对于js文件中的ES6语法进行转换 - 在项目中,我们引入的包中也有很多js文件,因为我们需要在配置时剔除
node_modules文件的中js - 除了
babel-loader,还需要引入babel的核心@babel/core - 配置预设
presets,使用@babel/preset-env
webpack.config.js 文件的配置
module:{
rules:[
{
// JS 兼容性处理 babel-loader @babel/core @babel/preset-env
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
// @babel/preset-env是babel的转码器
"presets":["@babel/preset-env"]
}
}
]
},
问题:
-
@babel/preset-env只能转换基本的ES6语法 - 更高级的诸如promise等语法是转换不了的
2.3 全部兼容的处理方案
说明:
- 使用
@babel/polyfill处理所有JS语法的转化 - 使用方式是下载后在入口js中通过import导入
使用方式,在入口js中
// 使用@babel/polyfill
import "@babel/polyfill"
问题:
- 在入口js中导入,webpack会将
@babel/polyfill中所有的内容都进行打包 - 因此就算我们用不到的转码方式也会被打包,造成打包后的js文件体积过大
2.4 按需加载
说明:
- 不使用
@babel/polyfill处理转码 - 使用
core-js处理加载 - 在
webpack.config.js文件中配置
在webpack.config.js 中配置
module:{
rules:[
{
// JS 兼容性处理 babel-loader @babel/core @babel/preset-env
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:{
// @babel/preset-env是babel的转码器
"presets":[
[
"@babel/preset-env",
{
// 配置按需加载
useBuiltIns:"usage",
// 指定core-js的版本
corejs:{
version: 3
},
// 指定兼容做到哪些浏览器的版本
targets: {
chrome: "60",
firefox: "60",
ie: "9"
}
}
]
]
}
}
]
},
这样,同样可以做到转码,同时打包后的体积也没有使用@babel/polyfill那么大
2.5. 抽离为文件
抽离文件说明:
- 所有的配置内容都放在
webpack.config.js并不是太好 - 因此我们可以把转码的配置抽离为单个的文件
- 这样的好处在修改配置和后续维护上更加便利
抽离为.babelrc文件
{
"presets":[
[
"@babel/preset-env",
{
// 配置按需加载
"useBuiltIns":"usage",
// 指定core-js的版本
"corejs":{
"version": 3
},
// 指定兼容做到哪些浏览器的版本
"targets": {
"chrome": "60",
"firefox": "60",
"ie": "9"
}
}
]
]
}
3. js代码检查
3.1 代码检查说明
语法检查说明:
- 使用eslint-loader 检查js文件,但是要排除node_modules文件中的js
- eslint-loader依赖于eslint 所以下载包时两个都要下载
- 使用eslint时,还需要决定使用哪种代码检测 使用
eslint-config-airbnb-base - 因为
eslint-config-airbnb-base又依赖于eslint和eslint-plugin-import
3.2 配置
在webpack.config.js中配置使用eslint
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
// 自动修复eslint错误
fix:true
}
}
]
},
在package.json中配置eslint使用的规则
{
"eslintConfig":{
"extends": "airbnb-base"
}
}
也可以将eslint配置抽离为单独的文件
.eslintrc文件
{
"root": true,
"extends": "airbnb-base"
}
网友评论