1.在讲解之前先说一个比较简单的webpack优化,我们都知道jquery是一个不依赖其他的插件的一个js函数库 但是我们webpack 解析的时候 会去寻找里面的依赖库 这个时候会给打包增减点时间
我们可以让webpack 不去解析 jquery中的依赖关系 就可以 达到webpack的优化效果了
module:{
noParse:/jquery/, // 不去解析jquery中的依赖关系
}
然后我们再执行npm run build的时候 打包速度明显就加快了些
2.上面的只是预热了一下 下面才开始正题
我们先使用webpack 搭建一个 react的项目
第一步先进入文件夹 初始化项目
npm init -y
第二步安装依赖
npm i react react-dom babel-loader @babel/core @babel/preset-env @babel/preset-react -D
当然webpack也要提前安装好 还有一些辅助的插件
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
3.当前目录下 新建立 src 文件夹 src/index.js
import React from "react"; // 引入react
import { render } from "react-dom"
render(<h1>Hello world</h1>,document.getElementById('root')); // 页面上渲染一个hello world
4.新建立一个webpack.config.js文件 进行我们的webpack配置
注意 别忘记在当前项目下新建立一个 index.html的模板文件
let path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist/')
},
devServer:{
port:'3000',
open:true,
contentBase:'./dist'
},
module:{
noParse:/jquery/, // 不去解析jquery中的依赖关系
rules:[
{
test:/\.js$/i,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin({ // 引入html模板文件
template:'./index.html',
filename:'index.html'
})
]
}
5.在package,json文件中配置启动和打包
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
然后我们执行 npm run build
最后在页面上确实显示出来了 Hello world
接着我们再看下 打包的代码大小
839kb 快1M的代码空间 这个时候我们能不能把他变小一点呢 答案是当然可以了
前面大家都知道了 我们打包只有代码之所以这么大 是因为 我们引入了俩个 大的 js 代码库
react 和react-dom
我们可能有这样的想法 能不能把这俩个先打包了 然后导出一个变量 让我们需要引入的页面 引入导出的变量 不就可以缩小 我们 的代码体积了么
这个webpack 也确实给我们 整了一种方法 就是来解决这种问题 生成动态链接库
6.在当前项目下 新建立一个 webpack.config.react.js文件 来配置
let path=require('path');
let webpack=require('webpack');
module.exports={
mode:'production',
entry:{
react:['react','react-dom'] // 打包 react 和react-dom 在一个 代码块 react中
},
output:{
filename:'_dll_[name].js', // 产生的文件名字
path:path.resolve(__dirname,'dist/'),
library:'_dll_[name]', // 导出的js文件 库名字叫做 ab
libraryTarget:'var' // comomjs 规范
},
plugins:[
new webpack.DllPlugin({
name:'_dll_[name]', // 要和output输出文件名字同名
path:path.resolve(__dirname,'dist','manifest.json')
})
]
}
配置完成后我们执行 命令
npx webpack --config webpack.config.react.js
会在dist目录下生成一个 manifest.json的文件和_dll_react.js文件
后面我们就要在我们的项目中引入了
首先 手动在我们的index.html的模板文件中引入我们生成的 js文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./_dll_react.js"></script>
</body>
</html>
还没有结束 还需要在 我们的webpack.config.js中引入我们的动态链接库资源
plugins:[
new webpack.DllReferencePlugin({
manifest:path.resolve(__dirname,'dist','manifest.json')
}),
....
}
到这里之后 保证代码没有写错的情况下 重新运行一下 npm run build 试试看
页面照样出来了 Hello world 的文件 然后我们再看看 压缩后的代码体积
才 6.62kb 是不是明显缩小了很多 这个生成动态链接库 算是webpack 中 比较常见的一种优化方式了 好了到此结束了
如果觉得有用 点个赞 谢谢了
