- 现在我们继续来说一下配置 noParse；
noparse 对于不引用其他的包的库，我们在打包的时候就没有必要去解析，这样能够增加打包速率,比如我们jquery，我们都知道它不会依赖其他库，所以没有解析它的必要。配置也很简单
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
noParse:/jquery/,//不去解析jquery中的依赖库
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html'
})
]
}
- 好我们继续接下来的优化项。比如我们引入第三方包moment。Moment.js是一个JavaScript的日期、时间处理工具类。
先安装cnpm i moment；
然后在src/index.js中引入；
import moment from 'moment'
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
我们去node_modules下的moment.js中搜索require。可以搜索到
'./locale/'
image.png
locale文件夹放的是改工具可以转换的所有语言。比如现在我们打包
image.png
可以看到home.js 233kb
我们启动服务，看控制台
image.png
打印的是英文，我们要引入中文的话。可以用moment.local方法
import moment from 'moment'
moment.locale('zh-cn')
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
image.png
- 但是现在我们只需要中文就可以了，不需要其他语言，那locale文件夹就没有打包的必要了。我们这个时候需要用到webpack自带的插件webpack.IgnorePlugin
image.png
index.js中要使用中文我们就手动引入中文包就可以
import moment from 'moment'
// 手动引入
import 'moment/locale/zh-cn';
moment.locale('zh-cn')
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'))
启动服务控制台依然显示中文
image.png
我们再打包看一下大小
image.png
- 明显比刚才小多了。
- 接下来说一下动态连接库；
- 这里我们用react举例。 首先安装
cnpm i react react-dom - 然后为了解析react。需要安装babel插件
cnpm install --save-dev @babel/preset-react
index.js
import React from 'react'
import {render} from 'react-dom'
render(<h1>jsx</h1>, window.root) // root 指的是index.html中的id="root"的div元素
webpack.config.js
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
home: './src/index.js'
},
output: {
filename: '[name].js', // 打包出对应的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('src'),
use: {
loader: 'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['home']
})
],
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack 学习</title>
</head>
<body>
<div id='root'></div>
</body>
</html>
启动服务
image.png
可以看到正常的启动了服务。现在我们打包的话会把react，react-dom也打包进去。这时第三方库，没有打包的必要
image.png
- 这个时候我们单独配置一个js，单独打包react.react-dom
创建 webpack.config.react.js
let path = require('path');
module.exports ={
mode: 'production',
entry: ['react', 'react-dom'],
output:{
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
}
}
然后我们命令行打包
webpack --config webpack.config.react.js
可以看到打包出来了文件，但是打包出来的文件没有暴露变量出来，我们用不了；
这时我们就需要library配置了
let path = require('path');
module.exports ={
mode: 'production',
entry: ['react', 'react-dom'],
output:{
filename: '_dll_[name].js',
path: path.resolve(__dirname, 'dist'),
library: '_dll_[name]',
libraryTarget: 'var' //commonjs umd this ...... // 默认var方法暴露，也有其他暴露方法
}
}
image.png
- 我们是要动态，那就需要一个清单可以找到这个连接库。webpack内置插件webpack.DllPulgin
webpack.config.react.js
let path = require('path');
let webpack = require('webpack')
module.exports ={
mode: 'production',
entry: ['react', 'react-dom'],
output:{
filename: '_dll_[name].js',
path: path.resolve(__dirname, 'dist'),
library: '_dll_[name]',
libraryTarget: 'var' //commonjs umd this ...... // 默认var方法暴露，也有其他暴露方法
},
plugins:[
new webpack.DllPlugin({
name: '_dll_[name]', // 与library 同名 规定好的‘
path: path.resolve(__dirname, 'dist', 'manifest.json') // 打包到dist目录下的manifest.json文件
})
]
}
打包后，可以看到manifest.json中配置好了react.react-dom库对应的清单
image.png
现在react react-dom打包后了，我们主文件打包的时候需要引入东岱连接库，需要在webpack.config.js定义webpack.DllReferencePlugin
webpack.config.js
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
home: './src/index.js'
},
output: {
filename: '[name].js', // 打包出对应的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('src'),
use: {
loader: 'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json'), //先去清单查找，找不到的话再去打包react react-dom
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
})
],
}
但是唯一需要注意点是，既然我们把react react-dom单独打包了，那我们就需要在html中引入
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack 学习</title>
</head>
<body>
<div id='root'></div>
<script src='_dll_main.js'></script>
</body>
</html>
现在我们打包主文件
npm run build
image.png
image.png
然后我们把打包后的文件，启动服务试一下
image.png
也成功的显示了。现在我们开发的时候，就不用每次都打包react react-dom了，可以更快速的打包，并专注于我们的开发了；
网友评论