70% chunk graphy 编译慢（引入babel-plugin-dynamic之后冲突问题）

最新推荐文章于 2023-10-24 21:45:18 发布
原创 最新推荐文章于 2023-10-24 21:45:18 发布 · 941 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#babel #plugin #vue

本文介绍如何配置babel-plugin-dynamic-import-node插件实现按需加载组件，并调整动态路由配置以避免冲突。
  1. 配置babel-plugin-dynamic-import-node插件
    npm install babel-plugin-dynamic-import-node
  2. 修改 babel.config.js 配置文件
    module.exports = {
     
     
	presets: [
	    '@vue/app'
 ],
	env: {
     
     
	    development: {
     
     
	      plugins: ['dynamic-import-node']
	    }
最低0.47元/天 解锁文章
开发过程中vue项目保存编译慢优化方法
会飞的咕咕鱼的博客
02-21 2万+
问题描述 近期在做一个VUE项目，项目越做越大，相继带来的问提也就越来越多，当前存在的问题是：1.开发过程中，修改一个文件，保存一下项目需要特别久。 2.npm run dev启动项目需要特别久。 吓人吧，作为开发者，相信大家都懂那种感觉（想砸电脑） 优化方法 1.开启uglifyjs-webpack-plugin 的 cache（文件webpack.prod.conf.js） 该方法优化后...
taro报错运行报错chunk common [mini-css-extract-plugin] Conflicting order between: ......
qq_44472790的博客
10-28 2238
具体错误如下： chunk common [mini-css-extract-plugin] Conflicting order between: css ./node_modules/css-loader/dist/cjs.js??ref–2-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/di
webpack有多个HtmlWebpackPlugin导致编译很慢问题
qq_30908729的博客
07-28 926
webpack多页面入口导致编译很慢问题 解决方法： 先在build/webpack.dev.conf.js或者build/webpack.prod.conf.js引入CommonsChunkPlugin const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); 再添加plugins中添加两个CommonsChunkPlugin，manifest和vendor，并在你的自定义页面模块引入'..
vue-cli-service 71% chunk graph
zqf1204的博客
09-06 980
@[TOC]71% chunk graph 1 问题描述 vue-cli 创建的项目，在vscode中启动开发服务器时，每次编译都停在71% chunk graph，然后窗口崩溃。 窗口奔溃是提供的原因是 oom 查看log记录，可以看到 ... 20 error code ELIFECYCLE 21 error errno 134 ... 23 error This is probably not a problem with npm. There is likely additional logging
详解Node中导入模块require和import的区别
08-29
本篇文章主要介绍了详解Node中导入模块require和import的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
babel编译es6
yanzi_0216的博客
09-05 755
babel编译es6 方法一：引入JS文件（在线） 问题 1，在线编译效率更低（特别是当脚本文件过大时） 2，本身browser.js就不兼容更低版本的浏览器（IE7及以下） <script src="browser.min.js" charset="utf-8"></script> // 注意此时es6编写的脚本的mine type属性要设置为"text/bable"，便于被browser.min.js文件识别并编译。 <script type="text/bable"&
babel: 谈一谈 babel-plugin-import
weixin_30517001的博客
02-24 1216
自动按需加载插件，官方文档 转载于:https://www.cnblogs.com/gaollard/p/10428194.html
vue项目 热更新慢
eva_tiantian的博客
03-03 6681
vue项目 --- 热更新慢一、查找热更新慢是哪里慢---分析原因二、解决办法1、安装babel-plugin-dynamic-import-node插件2、.babelrc文件里添加配置dynamic-import-node3、改变路由懒加载方式 突然有一天，vue项目跑着跑着，热更新的时候卡到75%的地方卡好久，一个热更新要10几秒，这简直耽误开发进度，不能忍，怎么办呢？ 一、查找热更新慢是哪里慢—分析原因 针对这个分析了一下热更新慢的原因，步骤如下 首先先在package中的启动命令加上 --prog
webpack踩坑--webpack 2.x升级至4.x
weixin_33868027的博客
12-10 897
一.安装webpack-cli，webpack@4.26.1 1.npm install webpack-cli -D 2.npm install webpack@4.26.1 -D 二.踩坑 执行npm run dev报错 1./Users/lily/ForWork/forBMSys/bm-fe/node_modules/html-webpack-plugin/lib/compiler...
webpack-retry-chunk-load-plugin:一个Webpack插件，可重试加载失败的块
03-07
const { RetryChunkLoadPlugin } = require ( 'webpack-retry-chunk-load-plugin' ) ; plugins: [ new RetryChunkLoadPlugin ( { // optional stringified function to get the cache busting query string ...
inline-chunk-manifest-html-webpack-plugin：用于html-webpack-plugin的扩展插件，用于内联webpack的块清单。 头标签中的默认内联
02-06
内联块清单HTML Webpack...用于扩展插件，联webpack的块清单。 默认为<head>标记中的内联。 输出示例 用于分配全局webpack清单变量的脚本标记，注入到<head> 。... window ....npm install inline-chunk-manif
vuecli3打包报警告：chunk chunk-common [mini-css-extract-plugin] Conflicting order.
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-11 1万+
问题 运行 npm run build 时，报下面的 warning 解决方案 我们在 vue.config.js 配置文件里添加下面的 css 配置，用于打包时禁用顺序检查 https://github.com/vuejs/vue-cli/issues/3771 css: { extract: process.env.NODE_ENV === 'production' ? { ignoreOrder: true, } : false, } 我用的解决方式就是这一种，其他的我试过一些
【Vue项目总结】webpack常规打包优化方案
sinat_35993535的博客
05-04 797
由于新建项目发版打包时间大概需要30分钟，发版时严重拖慢下班时间，所以特意查看了相关文档来优化打包速度，争取早点下班，_。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用webpack-bundle-analyzer插件来分析我们打包后生成的文件 安装 npm i webpack-bundle-analyzer -D 使用 修改w...
Webpack重要知识点
大灰狼的小绵羊哥哥的博客
07-09 1263
最近在系统整理知识点，现将Webpack的一些重要知识点罗列出来，方便快速查阅。 Tree Shaking 为了使用tree shaking，需要满足以下条件： 使用ES2015语法(即import和export) 在项目package.json文件中，添加sideEffects入口 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如：UglifyJSP...
关于webpack4提高热更新速度
是陈哈哈噢
02-23 1337
关于webpack4提高热更新速度
Babel常用的插件
socaicaicaicai的博客
05-10 2481
Babel常用的插件1. @babel-plugin-dynamic-import-node作用：在开发环境下解决vue热加载编译速度慢的问题。2. @babel/plugin-syntax-dynamic-import作用：懒加载引入动态文件。3. @babel/plugin-proposal-object-rest-spread作用：插件会将类中的属性编译参数 loose4. @babel-plugin-transform-vue-jsx作用: Vue中的渲染函数可以支持JSX语法 1. @babel-
详细记录前端项目使用import懒加载组件打包失败的踩坑之路
yorcentroll的博客
06-07 4081
最后还是回到babel.config.js文件,尝试把这个配置删了'@vue/cli-plugin-babel/preset'，奇迹出现了，果然成了。
npm—babel-plugin-syntax-dynamic-import(插件语法动态导入)
热门推荐
m0_37616866的博客
01-02 2万+
参考文档 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/ https://babeljs.io/docs/en/configuration 1. 安装 npm install --save-dev @babel/plugin-syntax-dynamic-import --save-dev 表示开发时...
vue中babel-plugin-dynamic-import-node插件的优缺点
weixin_44709363的博客
10-24 671
使用方法： 在babel.config.js中 写入plugins: ['dynamic-import-node']2.缺点：此插件不支持import 写法。当利用import异步引入组件的方式时，再使用此插件会报错，找不到此组件。1.如果想加快项目的编译速度，可利用此插件。
扩展html-webpack-plugin：inline-chunk-manifest插件详解
### 知识点：inline-chunk-manifest-html-webpack-plugin #### 简介 `inline-chunk-manifest-html-webpack-plugin` 是一个专为 `html-webpack-plugin` 设计的扩展插件，其主要功能是将 webpack 的块清单（chunk ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值