- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? 优化开发体验 优化开发体验主要从更快的构建和更方便的功能入手。 有一个工具叫做webpack analyze 以可视化的方式直观的分析构建，来进一步优化构建结果和速度。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile
1.5K110发布于 2018-01-08 - 来自专栏IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? 优化开发体验 优化开发体验主要从更快的构建和更方便的功能入手。 有一个工具叫做webpack analyze 以可视化的方式直观的分析构建，来进一步优化构建结果和速度。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile
83120发布于 2019-12-05 - 来自专栏腾讯IMWeb前端团队
webpack2 终极优化
webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。 可以通过这以下几点做到 压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader? 插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。 有一个工具叫做webpack analyze 以可视化的方式直观的分析构建，来进一步优化构建结果和速度。 要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile
83820编辑于 2022-06-29 - 来自专栏腾讯IMWeb前端团队
理论｜webpack2 终极优化
webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。 除了压缩文本代码外还可以： 1）用imagemin-webpack-plugin 压缩图片 2）用webpack-spritesmith 合并雪碧图 3）对于支持es6的js运行环境使用babili 以上优化点只需要在构建用于生产环境代码的时候才使用 优化开发体验 优化开发体验主要从更快的构建和更方便的功能入手。 entry A 和 B 生成的js文件， 输出的html: 输出的目录结构 分析输出结果 webpack有一个工具叫做webpack analyze 以可视化的方式直观的分析构建，来进一步优化构建结果和速度
85510编辑于 2022-06-29 - 来自专栏前端博客
webpack性能优化(2)：splitChunks用法详解
之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli，默认生成的vendor.js true, cacheGroups: { default: { reuseExistingChunk: true, minChunks: 2, splitChunks默认有两个缓存组：vender（webpack5 默认为defaultVendors）和default，optimization.runtimeChunk优化持久化缓存的, runtime externals配置启用CDN，提高缓存效率与打包分析，具体参看《webpack性能优化(0):webpack性能优化概况-优化构建速度 》路由懒加载分组分组修改方法如下：const Role = ( 性能优化(2)：splitChunks用法详解》,请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8554.html
2.2K20编辑于 2023-03-18 - 来自专栏前端博客
webpack性能优化(2)：splitChunks用法详解
之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli，默认生成的vendor.js true, cacheGroups: { default: { reuseExistingChunk: true, minChunks: 2, splitChunks默认有两个缓存组：vender（webpack5 默认为defaultVendors）和default，optimization.runtimeChunk优化持久化缓存的, runtime externals配置启用CDN，提高缓存效率与打包分析，具体参看《webpack性能优化(0):webpack性能优化概况-优化构建速度 》路由懒加载分组分组修改方法如下：const Role = ( 性能优化(2)：splitChunks用法详解》,请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8554.html
2.6K42编辑于 2023-03-18 - 来自专栏js笔记
webpack优化
webpack.config 按照production和dev分开配置， wepback.base.config.js npm install webpack-merge -D const path (eot|woff|woff2)$/, use: "file-loader", }, { test: /\.js$/, use: { //webpack内置插件 const { HotModuleReplacementPlugin } = require("webpack"); const htmlWebpackPlugin = require ("html-webpack-plugin"); const { merge } = require("webpack-merge"); const baseConfig = require(". postcss.config.js module.exports = { plugins: [ require("autoprefixer")({ overrideBrowserslist: ["last 2
36610编辑于 2022-10-25 - 来自专栏生如夏花绚烂
webpack优化
是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。 我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程 chunks:'initial',//入口处开始 minSize:0,//>0字节 minChunks:2, //用过2次以上 }, vendor:{ //引用多次第三方模块 //用过2次以上 } } } }, mode:'production', entry:{
50120编辑于 2022-09-08 - 来自专栏coding for love
5-10~11 webpack 性能优化（2）
2. 下面我们看下如何来使用： 首先安装该插件，这里要注意 webpack4 和 webpack2/3 安装的版本并不一样。 webpack 4 npm install --save-dev autodll-webpack-plugin webpack 2 / 3 npm install --save-dev autodll-webpack-plugin 即将被抛弃的 dll 上面可以看到，使用 dll 能极大提升构建速度，可是 dll 本身就是为了弥补 webpack 打包的不足而出现的，随着 webpack 的升级和优化，额外使用插件实现 dll 带来的提升已经越来越小 参考 你是否需要webpack dll webpack使用-详解DllPlugin webpack打包指位置Dll打包方式 使用 happypack 提升 Webpack 项目构建速度 Webpack
1.5K10发布于 2020-05-26 - 来自专栏lonelydawn的前端猿区
webpack性能优化
开发环境优化 HMR 模块热替换 devServer设置hot: true style-loader 已实现 webpack.HotModuleReplacementPlugin source map 建立源码与构建代码之间的映射关系，快速定位错误在源码中的位置 生产环境优化（构建时优化 & 运行时优化） 缓存策略 配置babel-loader时，设置cacheDiretory 为true，开启babel缓存，之后webpack在打包时，只会对修改过的模块重新编译，其他模块读取babel缓存中的即可 配合静态资源缓存策略，webpack要在输出文件名称上加hash Tree Shaking webpack在打包时，会自动去掉引用了但未使用的模块 sideEffects，在直接 import 模块名称时， webpack无法判断引入的模块是否有用，因为即使没有导出值，但也可能修改了全局对象 ，所以对这些模块，都不会执行Tree Shaking，我们可以在package.json中配置sideEffects告诉webpack哪些模块是有作用的，而其他模块则是无用的 Code Spliting
50320发布于 2021-09-26 - 来自专栏零域Blog
webpack 优化(1)
webpack 优化 前一段时间一直在写后台管理系统（vue + elementUI + webpack），数下来，虽然不多，也有 3 个了；由于是单页应用，每次到发布的时候，都会耗费大量的时间对代码进行编译压缩 ，所以时不时都会思考着如何才能优化这个过程；谷歌和度娘就像是哆啦 A 梦的奇幻袋，总能给大家带来意想不到的惊喜，当然，这次也不例外。 happypack npm的官方解释比较简单：通过并行转换文件以使 webpack 的构建速度更快；说白了就是利用多线程的优势。 它提供了一个插件和一个加载器，两个并用才能启用 happypack。 include: [ resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server /client') ] } ] } }; 敬请期待下一节 webpack 优化(2) Dllplugin ^_^
34430编辑于 2022-03-25 - 来自专栏全栈程序员必看
webpack打包优化_webpack打包及部署
由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。 我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程 HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用 安装 HappyPack npm i -D happypack 使用 HappyPack webpack.config.js 对应的参数 id：String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件. loaders: Array 用法和 webpack Loader 配置中一样. threads verboseWhenProfiling: Boolean 开启webpack –profile ,仍然希望HappyPack产生输出。 debug: Boolean 启用debug 用于故障排查。
1.2K20编辑于 2022-11-01 - 来自专栏全栈程序员必看
webpack打包优化面试_什么是webpack
刚开始要基本,开发模块,实现入口,出口打包 2. 后来实现html,抽离css文件输出打包输出 3. 正常实现es6转换es5 基本实现效果查看webpack官网达到实现效果 ---- 一、通过实现减少查找路径来实现优化？ //某个路径 配置别名 优化 resolve: { alias: { "@": "", }, 二、通过多线程工作来优化 首先需要引入一包 happypack,在plugins (dllPlugin) //第三方动态链接库(专门去做第三方包抽离) 弄成cdn链接 dllplugins const webpack = require("webpack"); plugins: [ webpack版本匹配 webpack中package.json中版本 ---- 总体代码: //path 拼接路径 const path = require("path"); //清除 每次只显示一个
1.2K20编辑于 2022-11-03 - 来自专栏全栈程序员必看
webpack 多线程_webpack打包原理优化
安装happypack npm i happypack 改造webpack.config.js，实现多线程打包js let HappyPack = require('happypack');
56310编辑于 2022-09-27 - 来自专栏IMWeb前端团队
优化 Webpack 构建结果
我们团队中大部分项目也在使用Webpack构建。 庆幸的是Webpack生态圈是如此的丰富，有不少好工具可以利用。 1. 分析打包结果 webpack-bundle-analyzer是一个非常好用的Webpack包分析工具。 2. 模块异步化 首先我们来把非强依赖的模块异步化。 Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。 Webpack2则通过更标准的 import() 来实现同样的功能。 最后的结果如下图，相比优化前已经大幅改善了。 ? 4. 其他性能优化点 将NODE~ENV设置为 production。一般也需要增加 DefinePlugin 设置。 使用DllPlugin。
75890发布于 2018-01-08 - 来自专栏前端开发面试指南
详解webpack构建优化
webapck构建优化对于大项目是必须要考虑的一件事，下面我们就从速度和体积两方面来探讨构建优化的策略。分析工具在优化之前，我们需要了解一些量化分析的工具，使用它们来帮助我们分析需要优化的点。 图片优化构建速度多进程构建运行在Node.js之上的 Webpack 是单线程的，就算有多个任务同时存在，它们也只能一个一个排队执行。当项目比较复杂时，构建就会比较慢。 图片然后，我们在webpack.base.js做一下修改，去关联第1步中已经打好的包（第2步）module.exports = { plugins:[ //修改CleanWebpackPlugin /icon/star.png') no-repeat; } &.l2{ background: url('.. /icon/star2.png') no-repeat; } &.l3{ background: url('..
1.9K00编辑于 2022-10-10 - 来自专栏前端开发面试指南
Webpack构建速度优化
前言当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。 目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录 new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });以moment为例，首先找到moment中语言包所在的文件夹，然后在webpack 配置文件中添加插件new webpack.IgnorePlugin(/. import moment from 'moment'import 'moment/locale/zh-cn'moment.locale('zh-CN')优化 resolve 配置aliasalias
2K10编辑于 2022-10-18 - 来自专栏前端自习课
【Webpack】867- Webpack 优化阻塞的 CSS
现在有很多优化页面的办法，比如：静态资源的合并和压缩，code splitting，DNS预读取等等 本文介绍的是另一种优化方法：首屏阻塞css优化 原理： 首先我们了解一下页面的基本渲染流程 webkit 那么，如果我们能优化css，那么就能大大减少页面渲染出来的时间，从而提升pv，增加黏性 怎么做呢： 目前我知道的比较实用的办法是webpack集成critical，critical是一个提取关键css， 那么，我们开门见山，直接从webpack配置开始： const HtmlWebpackPlugin = require('html-webpack-plugin'); // 创建html来服务你的资源 = require('html-critical-webpack-plugin'); // 集成critical的html-webpack-plugin版本 const path = require( 可以看到，h2标签的css样式没有出现在内联style里，而是出现在main.
1.5K20发布于 2021-02-26 - 来自专栏IMWeb前端团队
优化 Webpack 构建结果
Webpack应该是当下流行度最广的JavaScript构建、打包工具了。我们团队中大部分项目也在使用Webpack构建。 庆幸的是Webpack生态圈是如此的丰富，有不少好工具可以利用。 1. 分析打包结果 webpack-bundle-analyzer是一个非常好用的Webpack包分析工具。 2. 模块异步化 首先我们来把非强依赖的模块异步化。 Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。 Webpack2则通过更标准的 import() 来实现同样的功能。 最后的结果如下图，相比优化前已经大幅改善了。 ? 4. 其他性能优化点 将NODE~ENV设置为 production。一般也需要增加 DefinePlugin 设置。 使用DllPlugin。
66830发布于 2019-12-03 - 来自专栏无所事事者爱嘲笑
vue-cli webpack2项目打包优化
替换代码压缩工具 Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度慢 ； webpack-parallel-uglify-plugin 插件可以并行运行 UglifyJS 插件 拷贝静态文件 使用copy-webpack-plugin插件：把指定文件夹下的文件复制到指定的目录；其配置如下： var CopyWebpackPlugin = require('copy-webpack-plugin 一、在项目build文件夹下新增文件webpack.dll.conf.js，内容如下 var path = require('path') var webpack = require('webpack' ', '[name]-manifest.json'), libraryTarget: 'commonjs2', name: '[name]_library' }), 二、在webpack.prod.conf.js文件里插件部分添加： plugins: [ ... // copy custom static assets new webpack.DllReferencePlugin
1.5K40发布于 2018-06-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号