webpack打包优化的方式

最新推荐文章于 2024-03-20 11:54:40 发布
最新推荐文章于 2024-03-20 11:54:40 发布
阅读量52 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QLF19/article/details/131811958
版权

（1）、hash优化缓存

css独立打包

安装

npm install css-loader html-webpack-plugin mini-css-extract-plugin clean-webpack-plugin -D

//webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require("html-webpack-plugin")

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const {CleanWebpackPlugin} = require("clean-webpack-plugin")

const { clear } = require('console')

module.exports = {

        mode:'development',

        entry:{

                app:path.resolve(__dirname,'src/main.js')

        }, 

        output:{

                 filename:"bundle.js",

                path:path.resolve(__dirname,"dist")

         },

        resolve:{

                extensions:[".css",".js",".vue"]

         },

        module:{

                rules:[

                        {

                                test:/\.css$/,

                                use:[MiniCssExtractPlugin.loader,"css-loader"]

                        }

                 ]

        },

        plugins:[

                new CleanWebpackPlugin(),

                new MiniCssExtractPlugin({

                         filename:"index.css"

                }),

                new HtmlWebpackPlugin({

                         template:"./src/index.html"

                 })

        ]

}

//src/css/index.css

:root {

        background-color: yellow;

}

//src/index.html

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

</head>

<body>

        <div id="app"></div>

</body>

</html>

//src/main.js

import "./css/index.css"

console.log('main')

//server.js

const express = require("express")

const app = express()

const path = require("path")

//设置静态资源缓存1小时

app.use(express.static(path.resolve(__dirname,"dist"),{maxAge:1000*3600}))

app.listen(3000)

（2）、noParse

module:{

        noParse:/jquery/,

}

（3）、全局变量

//如果，就不用通过import引入即可全局使用

plugins:[

        new webpack.ProvidePlugin({

                $:"jquery"

        })

]

（4）、externals

//webpack.config.js

const path = require('path')

const HtmlWebpackPlugin = require("html-webpack-plugin")

const webpack = require('webpack')

module.exports = {

        mode:'development',

        entry:{

                app:path.resolve(__dirname,'src/main.js')

         },   

        output:{

                 filename:"bundle.js",

                path:path.resolve(__dirname,"dist")

         },

        resolve:{

                extensions:[".css",".js",".vue"]

         },

        module:{

                // noParse:/jquery/,

                rules:[

                        {

                                test:/\.css$/,

                                use:["css-loader"]

                        }

                ]

        },

        plugins:[

                new webpack.ProvidePlugin({

                        $:'jquery'

                }),

                new HtmlWebpackPlugin({

                        template:"./src/index.html"

                })

         ],

        externals:{

                'jquery':'$'

        }

}

（5）、ignorePlugin

new webpack.IgnorePlugin({

        contextRegExp:/moment/,

        resourceReExp:/\.\/locale$/

})

//src/main.js

import moment from "moment"

import "moment/locale/zh-cn"

moment.locale("zh_cn):

console.log(moment().format('LL'))

（6）、tree shaking

ES6 modules

mode:"production"

（7）、dllplugin

npm install react react-dom -S

npm install @babel/preset-env @babel/preset-react -D

const webpack = require('webpack')

const path = require('path')

const HtmlWebpackPlugin = require("html-webpack-plugin)

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {

        mode:"development",

        entry:{

                app:path.resolve(__dirname,"src/main.js")

        },

        output:{

                filename:"[name].js",

                path:path.resolve(__dirname,"dist")

        },

        module:{

                rules:[

                        {

                                 test:/\.js$/,

                                exclude:/node_modules/,

                                use:[{

                                        loader:"babel-loader",

                                        options:{

                                                presets:[

                                                        ["@babel/preset-env",

                                                        {

                                                                "useBuiltIns":"usage",

                                                                corejs:{

                                                                        version:3

                                                                }

                                                        }],

                                                         "@bable/preset-react"

                                                ]

                                         }

                                }]

                        }

                ]

        },

        plugins:[

                new webpack.DllReferencePlugin({                         manifest:path.resolve(__dirname,"dist/dll","manifest.json")

                }),

                new HtmlWebpackPlugin({

                        template:"./src/index.html"

                })

        ]

}

//webpack.dll.config.js

const webpack = require('webpack')

const path = require('path')

const HtmlWebpackPlugin = require("html-webpack-plugin)

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {

        mode:"development",

        entry:{

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

         },

        output:{

                 filename:"[name].dll.js",

                path:path.resolve(__dirname,"dist/dll"),

                library:"[name]_dll"

        },

        module:{

                rules:[

                        {

                                 test:/\.js$/,

                                exclude:/node_modules/,

                                use:[{

                                        loader:"babel-loader",

                                         options:{

                                                 presets:[

                                                        ["@babel/preset-env",

                                                        {

                                                                "useBuiltIns":"usage",

                                                                corejs:{ version:3 }

                                                        }

                                                ],

                                                "@bable/preset-react" ]

                                        }

                                 }]

                        }

                 ]

        },     

        plugins:[

                new webpack.DllPlugin({

                        name:"[name]_dll",

                        path:path.resolve(__dirname,"dist/dll","manifest.json")

                })

         ]

},

//dist/index.html

<script src="dll/react.dll.js"></script>

Moving Bricks.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈Webpack打包优化技巧
08-27
浅谈Webpack打包优化技巧 Webpack作为目前最火的打包工具，在前端开发中被广泛应用。在项目开发中，我们不可避免地遇到了打包优化的问题，本文将总结Webpack打包优化的一些细节和方法。 定位体积大的模块 要想对...
webpack4打包优化
cjvalue的博客
08-07 977
layout: post title: webpack4打包优化 categories: webpack tags: webpack4打包优化 针对vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本打包优化 一、量化、分析 speed-measure-webpack-plugin 时间分析 测量出在你的构建过程中，每一个 Loader 和 Plugin 的执行时长 而它的使用方法也同样简单，如下方示例代码所示，只需要在你导出 Webpack 配置时，为你的原始配置包一层 .
看完这篇你一定懂 --- Webpack4 打包优化
小柒的前端之旅
03-28 2676
前面的话 Webpack升级4之后，小柒踩过的很多坑，这篇文章总结Webpack4的一些新特性，以及常见的优化方式。 Webpack4 新特性 不再强制需要webpack.config.js配置文件。默认入口为./src/index.js，默认输出./dist目录，输出文件main.js Webpack不再能单独使用，4.x版本的很多命令都移动到了webpack-cli中。所以必须安装we...
Webpack打包优化常见的几种方案
guxin_duyin的博客
07-02 9296
webpack
webpack打包优化指南
weixin_55846296的博客
07-14 1981
目前所有公司项目的代码量都比较大，打包出来的文件会很大，甚至导致打包压缩代码时内存不足，页面加载速度也较慢。
webpack4 打包vue2项目特别慢----优化之路 （记录贴）
最新发布
u010609022的专栏
03-20 949
注：UglifyJsPlugin 在处理已经压缩过的文件时，在去除 unused variables 的环节性能会很差，处理时间是正常情况下的几十倍。疑问：设置了 unused: false, 那么webpack的treeshake是不是也没法达到最终效果了？最近公司项目打包特别 慢，决定优化一下，记录帖，前端小白，边学习边摸索，试试happypack？切到最新代码后使用上面配置，打包。几乎无区别，继续研究。继续不使用上面配置，打包。继续使用上面配置，打包。ms 速度提升55%不使用上面配置，打包。
webpack打包速度优化思维导图
02-18
webpack打包速度优化思维导图
webpack打包优化的几个方法总结
10-15
以下是一些常用的webpack打包优化方法： 1. **按需加载（懒加载）** - **路由组件按需加载**：在Vue或React等SPA应用中，可以通过动态导入实现组件的懒加载。例如，在Vue Router中，我们可以使用`require.ensure`...
三、webpack4.0优化
qq_25354709的专栏
02-20 577
一、noParse 新建一个 WEBPACK-OPTIMIZE 项目。 主要来讲一下webpack的优化。 初始化package.json。 npm init -y 安装： npm install webpack webpack-cli html-webpack-plugin @babel/core babel-loader @babel/preset-env @babel/pre...
前端面试系列之webpack优化
阿卡内的博客
11-01 1177
vue-admin没有了webpack.config.js文件，是直接在vue.config.js里的chainWebpack方法直接配置，这样做法的好处是用户既可以保留webpack的默认配置，又可以通过chainWebpack设置更具针对性的参数，链式的写法正是避免了用户直接面对webpack多而复杂的配置项。当用npm run build进行打包的时候，事实上是根据cacheGroups的默认配置进来分包并包的。1 分包策略的优化在默认策略的基础上，进行了优化。
webpack打包速度和体积优化总结
xuan的博客
07-09 3925
（1）使用 （2）作用：（1）使用:构建完成后会在 8888 端口展示大小 （2）作用 （1）使用 webpack4：优化原因： （1）资源并行解析可选方案 （2） 使用 HappyPack 解析资源 1、原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 2、使用 （2）使用 thread-loader 解析资源 1、原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 （3
Webpack 4 以及打包优化
weixin_43554698的博客
05-09 972
在上篇文章基础上https://blog.csdn.net/weixin_43554698/article/details/89914721 修改上次目录结构 需要下载的依赖package.js { "name": "webpack4-vue", "version": "1.0.0", "description": "", "main": "index.js"...
webpack 打包优化的四种方法
m0_73723713的博客
02-11 1376
如今，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。
vuecli3+webpack4优化实践（删除console.log和配置dllPlugin）
weixin_33966365的博客
03-10 6779
本文主要介绍如何在vuecli3生成的项目中，打包输出时删除console.log和使用dllplugin，并记录了配置过程中踩到的坑。 （本人水平有限～希望大家多多指出有误的地方） 一、生产环境中删除console.log 在开发代码中写的console.log，可以通过配置webpack4中的terser-webpack-plugin插件达成目的，compress参数配置如下: module....
webpack4.0打包优化策略(三)
weixin_34362790的博客
04-06 306
打包优化策略 webpack4.0打包优化策略(一) webpack4.0打包优化策略(二) webpack4.0打包优化策略(三) 提取公共代码与第三方代码 将多个入口重复加载的公共资源提取出来 相同的资源被重复的加载，浪费用户的流量和服务器的成本； 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。 如果能把公共代码抽离成单独文件进行加载能进行优化，可以减少网络传输流量...
升级优化Webpack4，使你的打包速度提升200%以上！
weixin_33709609的博客
05-10 3636
之前修改公司的运营系统，多年来积累下来的代码使得每次打包构建的时候时间异常漫长，非常难受，一气之下将项目的Webpack从2.x升级到了4.x，原来在Jenkins上一套需要6分钟的流程现在只需2分钟，顿时感到身心舒畅(￣▽￣)／ 并且我顺便把项目划分成多入口项目，实现增量更新，这样就不用每次都打包这么多文件啦！ ps：以下配置基于React，可以自行根据实际项目用到的框架和库修改 1. 配置中...
如何在Webpack4中添加插件自动去掉console
CF西西的专栏
04-26 8673
在原来webpack4之前，大家的主流做法是通过webpack的混淆配置来实现 new webpack.optimize.UglifyJsPlugin({ // Eliminate comments comments: false, // Compression specific options compress: { //...
webpack4+vuecli3 项目打包优化
weixin_39308542的博客
07-20 2377
1.把vue，axios，vue-router，vant, iconfont等长期不需要更新的包整理到/public/cdn目录下 2.安装js语法优化插件（babel-polyfill, classlist-polyfill） yarn add babel-polyfill classlist-polyfill 安装babel-polyfill和classlist-polyfill。Babe...
webpack4优化学习
我是渣渣
12-14 1306
libraryTarget 和 library 当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们 output.libraryTarget 配置以何种方式导出库 output.library 配置导出库的名称 output.libraryTarget 是字符串的枚举类型，支持以下配置 var (默认) 编写的库将通过var被赋值给通过library指定名称的变量。 in...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值