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

]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了优化前端性能,Webpack可以采取多种措施。首先,通过代码压缩、合并和缓存控制,可以减少文件大小并提高加载速度。例如,可以使用Webpack的压缩插件(如UglifyJS)来压缩JavaScript代码,并使用提取公共代码的功能来减少重复代码的加载。这样可以减小文件体积并提升页面加载速度。 其次,Webpack还支持使用ES6或CoffeeScript等高级语言来编写源码,并将其构建成浏览器支持的ES5代码,从而提高开发效率和代码质量。这可以通过使用Babel等工具和Webpack的loader来实现。 此外,Webpack还支持CSS的压缩。可以使用插件(如css-minimizer-webpack-plugin)来去除无用的空格,减小CSS文件的大小。这样可以提高页面的加载速度。 最后,对于HTML文件,Webpack也可以进行压缩。可以使用插件(如html-minimizer-webpack-plugin)来去除HTML文件中的无用空格、注释等,从而减小文件大小。这样可以加快页面加载速度。 综上所述,通过使用Webpack的各种优化手段,可以有效地提升前端项目的性能,加快页面加载速度,提高用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【前端知识之webpackwebpack如何优化前端性能](https://blog.csdn.net/weixin_44337386/article/details/125845074)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [webpack学习教程之前端性能优化总结](https://download.csdn.net/download/weixin_38656364/14902051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值