webpack性能优化

最新推荐文章于 2024-05-14 15:16:51 发布

零度碳酸-

最新推荐文章于 2024-05-14 15:16:51 发布

阅读量311

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_41086056/article/details/117384207

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

webpack性能优化

优化开发体验
优化输出质量

优化开发体验

提升效率
优化构建速度
优化使⽤体验

优化输出质量

优化要发布到线上的代码，减少⽤户能感知到的加载时间
提升代码性能，性能好，执⾏就快

缩⼩⽂件范围 Loader

优化loader配置
test include exclude三个配置项来缩⼩loader的处理范围
推荐include

include: path.resolve(__dirname, "./src"),

优化resolve.modules配置

resolve.modules⽤于配置webpack去哪些⽬录下寻找第三⽅模块，默认是[‘node_modules’]
寻找第三⽅模块，默认是在当前项⽬⽬录下的node_modules⾥⾯去找，如果没有找到，就会去上⼀级
⽬录…/node_modules找，再没有会去…/…/node_modules中找，以此类推，和Node.js的模块寻找机制
很类似。
如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。

module.exports={
 resolve:{
 modules: [path.resolve(__dirname, "./node_modules")]
 } }

优化resolve.alias配置

resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径
拿react为例，我们引⼊的react库，⼀般存在两套代码

cjs
采⽤commonJS规范的模块化代码
umd
已经打包好的完整代码，没有采⽤模块化，可以直接执⾏
默认情况下，webpack会从⼊⼝⽂件./node_modules/bin/react/index开始递归解析和处理依赖
的⽂件。我们可以直接指定⽂件，避免这处的耗时。

alias: {
 "@": path.join(__dirname, "./pages"),
 react: path.resolve(
 __dirname,
 "./node_modules/react/umd/react.production.min.js"
 ),
 "react-dom": path.resolve(
 __dirname,
 "./node_modules/react-dom/umd/react-dom.production.min.js"
 )
}

优化resolve.extensions配置

resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存
在。

extensions:['.js','.json','.jsx','.ts']

默认值：

后缀尝试列表尽量的⼩
导⼊语句尽量的带上后缀。

使⽤externals优化cdn静态资源

//公司有cdn
//静态资源有部署到cdn 有链接了
// 我想使⽤cdn！！！！！！！！
我的bundle⽂件⾥，就不⽤打包进去这个依赖了，体积会⼩
我们可以将⼀些JS⽂件存储在 CDN 上(减少 Webpack 打包出来的 js 体积)，在 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>Document</title>
</head>
<body>
 <div id="root">root</div>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>

我们希望在使⽤时，仍然可以通过 import 的⽅式去引⽤(如 import $ from ‘jquery’ )，并且希望
webpack 不会对其进⾏打包，此时就可以配置 externals 。

//webpack.config.js
module.exports = {
 //...
 externals: {
 //jquery通过script引⼊之后，全局中即有了 jQuery 变量
 'jquery': 'jQuery'
 }
}

使⽤静态资源路径publicPath(CDN)

CDN通过将资源部署到世界各地，使得⽤户可以就近访问资源，加快访问速度。要接⼊CDN，需要把⽹
⻚的静态资源上传到CDN服务上，在访问这些资源时，使⽤CDN服务提供的URL。

##webpack.config.js
output:{
 publicPath: '//cdnURL.com', //指定存放JS⽂件的CDN地址
}

咱们公司得有cdn服务器地址
确保静态资源⽂件的上传与否

css⽂件的处理

使⽤less或者sass当做css技术栈

$ npm install less less-loader --save-dev

{
 test: /\.less$/,
 use: ["style-loader", "css-loader", "less-loader"]
}

使⽤postcss为样式⾃动补⻬浏览器前缀
https://caniuse.com/

npm i postcss-loader autoprefixer -D

##新建postcss.config.js

module.exports = {
 plugins: [
 require("autoprefixer")({
 overrideBrowserslist: ["last 2 versions", ">1%"]
 })
 ]
};
##index.less
body {
 div {
 display: flex;
 border: 1px red solid;
 }
}
##webpack.config.js
{
 test: /\.less$/,
 include: path.resolve(__dirname, "./src"),
 use: [
 "style-loader",
 {
 loader: "css-loader",
 options: {}
 },
 "less-loader",
 "postcss-loader"
 ]
}

如果不做抽取配置，我们的 css 是直接打包进 js ⾥⾯的，我们希望能单独⽣成 css ⽂件。因为单独⽣
成css,css可以和js并⾏下载，提⾼⻚⾯加载效率

借助MiniCssExtractPlugin 完成抽离css

npm install mini-css-extract-plugin -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 {
 test: /\.scss$/,
 use: [
 // "style-loader", // 不再需要style-loader，⽤MiniCssExtractPlugin.loader
代替
 MiniCssExtractPlugin.loader,
 "css-loader", // 编译css
 "postcss-loader",
 "sass-loader" // 编译scss
 ]
 },
plugins: [
 new MiniCssExtractPlugin({
 filename: "css/[name]_[contenthash:6].css",
 chunkFilename: "[id].css"
 })
 ]

压缩css

借助 optimize-css-assets-webpack-plugin
借助cssnano

##安装
npm install cssnano -D
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
new OptimizeCSSAssetsPlugin({
 cssProcessor: require("cssnano"), //引⼊cssnano配置压缩选项
 cssProcessorOptions: {
 discardComments: { removeAll: true }
 }
})

压缩HTML

借助html-webpack-plugin

new htmlWebpackPlugin({
 title: "京东商城",
 template: "./index.html",
 filename: "index.html",
 minify: {
 // 压缩HTML⽂件
 removeComments: true, // 移除HTML中的注释
 collapseWhitespace: true, // 删除空⽩符与换⾏符
 minifyCSS: true // 压缩内联css
 }
 }),

development vs Production模式区分打包

npm install webpack-merge -D

案例

const merge = require("webpack-merge")
const commonConfig = require("./webpack.common.js")
const devConfig = {
 ...
}
module.exports = merge(commonConfig,devConfig)
//package.js
"scripts":{
 "dev":"webpack-dev-server --config ./build/webpack.dev.js",
 "build":"webpack --config ./build/webpack.prod.js"
}

基于环境变量区分

借助cross-env

npm i cross-env -D

package⾥⾯配置命令脚本，传⼊参数

##package.json
"test": "cross-env NODE_ENV=test webpack --config ./webpack.config.test.js",

在webpack.config.js⾥拿到参数

process.env.NODE_ENV

//外部传⼊的全局变量
module.exports = (env)=>{
 if(env && env.production){
 return merge(commonConfig,prodConfig)
 }else{
 return merge(commonConfig,devConfig)
 } }
//外部传⼊变量
scripts:" --env.production"

零度碳酸-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack性能优化

webpack性能优化优化开发体验优化输出质量缩⼩⽂件范围 Loader优化resolve.modules配置优化resolve.alias配置优化resolve.extensions配置使⽤externals优化cdn静态资源使⽤静态资源路径publicPath(CDN)css⽂件的处理压缩css压缩HTMLdevelopment vs Production模式区分打包优化开发体验提升效率优化构建速度优化使⽤体验优化输出质量优化要发布到线上的代码，减少⽤户能感知到的加载时间提升代码性能
复制链接

扫一扫

专栏目录