webpack的优化总结

1. 4.0版本webapck-cli 已经拿出来了 单独下载

2. 开发时优化 Dllplugin 动态链接库

happPack 提升打包速度 抽离出我们常用的包

3.打包后优化

treeshaking 删除没有用的

webpack 4 自动实现

作用域提升

__direname

html-webpack-plugin

plugins:[

newHtmlWebpackPlugin({

})

]

 

babel-loader

babel-core被取代 @babel/core@7 . @babel/preset-env

@preset-react

module 里面放规则

如果不新建.babelrc的话必须在module里面写option配置

reacts 自动生成react结构

mode:development

exclude 不进行babel：/node_modules/

include 只包含某一个目录

 

把react 和react-dom先打包好，在开发的时候引用打包好的文件

output里面

librry:'b'

变量控制 b 作为module.export的引用变量

libraryTarget:"commonjs"// global

exports['b']=(function(){})

window['b']

 

 

单独打包：

react react-dom

entry:{

react:["react","react-dom"]

// react是自己起的名字

}

 

output:{

library:'"[name]_dll",

// 必须起变量接收 否则index.html拿不到变量

filename:'dll.js'

// 这个name 就是react

}

let DllPlugin = require('webpack/lib/DllPlugin')

plugins:[

new DllPlugin({

"name":"[name]_dll",

path:path.resolve(__dirname,"dist","[name].mainfest.json")

})

]

 

生成dll.js 和mainfest.json 映射关系

mainfest.json

"name":"react_dll"

"content":"node_modules" 模块中找到对应的文件

 

index.html 单独引入react-dom

<script src="./dill.js"></script>

devServer:{

contentBase:"./dist"

}

// 来自dist下的dll.js

先把包打好了 以后不再打了

由一个个的打包 变成并行打包

happyPack 多线程

小项目降低打包速度

项目大的话 使用happyPack

let happPack = requrie('happyPack')

rules:[

{

use:"happypack/loader?id=xxx"

},

{

use:"happypack/loader?id=css"

}

 

]

 

plugins:[

new HappyPack({

id:"xxx",

use:['babel-loader']

})

]

多线程使用

js单线程 启用子进程

 

打包过程treeshaking

mode:"production"//内部调用uglifyjs tree shaking 4.0版本支持

antd 。 babel-plugin-import

import {Button}from 'antd'

 

 

exports.a =

node 写法动态引用不会treeshaking

require('./a')

不会treeshaking

treeshaking 适合es6语法

package.json 中配置

“build”:"webapck --display-used-exports"

导出时展示哪些用到了哪些没用到

重复代码的提取

A B 两个页面都引入相同的部分

optimization:{

splitChunks:{

cacheGroups:{

// 缓存组

common:{

minChunks:2 至少两个文件使用，

minSize:0 有一个字符重复就拿出来

chunks:"initial"

}，

vendor:{

chunks:"initial",

test:/node_modules/,

第三方的包 和自己的代码区分

minChunks:2,

minSize:0,

// 先走第三方 再走自己的

priority:10

}

}

}

}

entty:{

pageA:"./src/pageA.js",

pageB:"./src/pageB.js"

}

output:{

filename:"[name].js"

 

}

 

c文件只引用了jq

jq单独抽离出来 进行分离

let ModuleConcatenationPlugin = require('webapck/lib/ModuleConcatenationPlugin')

// 多个模块连接到一起

 

多个模块合并成一个闭包

export 和import的关系 变成了一个文件中var 变量的引用依赖

 

 

 

懒加载

spa路由

先渲染个空 等加载好再渲染这个组件 @babel/plugin-syntax-dynamic-import -D

// 4.0删除了

 

plugins：[]

首屏过慢

let Home=(props)=><AsyncComponent {...props} load = {()=>{

import ('./Home')

}}></AsyncComponent>

返回promise

// 执行父组件传递过来的数据func 并执行

this.props.load().then(res=>{

// this.setState({

// 执行加载后的的函数 替代原来的comp

})

})

 

需要在预设配置

"plugins":[

@babel/plugin-syntax/dynamic-import

]