vue 文件多了, webpack 热加载很慢? - V2EX

标签: | 发表时间:2019-10-22 14:14 | 作者:
出处:https://www.v2ex.com
点我最近刚好在看 webpack,如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章,不要脸的放一下博客

http://note.codermagefox.com/blog/magefox

如果时间不够只是想解决这个问题,那么我尝试正儿八经回答一下。优先级从上到下依次排列:

0.代码中是否有过多实例?
1.把 webpack 升级到 4.0。
2.优化 entrys.。
3.使用 DLLplugin,happypack 等构建加速插件。
4.检查 loader/eslint 是否配置错误 /不合理.
5.根据开发 /生产环境配置不同的 webpack 流程,或者使用 webpack4.0 的 mode 进行处理
6.babel 是否 exclude 掉了 node_modules,是否开启了 cacheDirectory
7.resolve 的文件夹是否过多?
8.是否使用 HMR 替换了 HotReload?
9.loader 是否正确的配置了生命周期且只干了必须要干的活?
10.是否使用了过多无必要的插件?
11.是否开启了 uglifyjs-webpack-plugin 的 cache ?

如果不做多页,可以考虑 parcel。我最近自己搭了 vue 和 react 的脚手架,目前速度是很快的。但是生产还是 vue-cli,升级到 vue-cli3beta 版本,编译速度提高很快。parcel1.7 好像原生支持 vue 了。

vue:  https://github.com/zouhangwithsweet/xiezhewan/tree/master/parcel
react:  https://github.com/zouhangwithsweet/mini-react/tree/master/react-music

相关 [vue 文件 webpack] 推荐:

vue 文件多了, webpack 热加载很慢? - V2EX

- -
点我最近刚好在看 webpack,如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章,不要脸的放一下博客. 如果时间不够只是想解决这个问题,那么我尝试正儿八经回答一下. 1.把 webpack 升级到 4.0. 3.使用 DLLplugin,happypack 等构建加速插件. 4.检查 loader/eslint 是否配置错误 /不合理.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.

轻松入门React和Webpack

- - SegmentFault 最新的文章
小广告:更多内容可以看 我的博客和 读书笔记. 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰. 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.

WebPack常用功能介绍

- - SegmentFault 最新的文章
WebPack常用功能介绍. Webpack是一款用户打包前端模块的工具. 主要是用来打包在浏览器端使用的javascript的. 同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等. 个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.

提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园

- -
本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了. 首先看demo打包后生成的文件大小,这个demo里面什么业务都没写、仅仅引入了几个包,chunk-vendors.js就达到了1.6M之多,如果是写入了庞大的业务后没做任何优化处理,那么这个文件可能会达到10M之多,这发生在我真实的项目经历中.

webpack - Feature Flag 功能发布控制

- - SegmentFault 最新的文章
很多时候我们会不小心把本地调试的代码发布掉,造成了线上的代码出现问题. 或者说暂时不希望某些正在开发的代码被执行,造成线上显示的不不正常或推迟上线. webpack.config.js里这样写. 配置完成后,我们可以这样写代码. 在webpack编译后会变成这个样子. 这个时候我们就要把 __DEBUG__设为 false了,这样在编译完成后就会变成这个样子.

微豆 - Vue 2.0 实现豆瓣 Web App 教程

- - SegmentFault 最新的文章
一个使用 Vue.js 与 Material Design 重构 豆瓣 的项目. 项目网站 http://vdo.ralfz.com/. # 克隆项目到本地 git clone https://github.com/RalfZhang/Vdo.git # 安装依赖 npm install # 在 localhost:8080 启动项目 npm run dev.

浅谈Vue组件在实际项目中的应用

- - JDC | 京东设计中心
Vue.js 是一套构建用户界面的渐进式框架,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 虽然目前 Vue 已经很火了,但不可否认的是,仍有很多人刚刚开始学习使用 Vue 来构建前端项目,从生疏的初学者到熟练运用 Vue 的过程中,不可避免地会走一些弯路. 为了实现某个功能,也许尝试过很多方法,最终蓦然回首,才发现当初犯下的错误是那么幼稚.

vue快速入门的三个小实例

- - SegmentFault 最新的文章
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下 webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了). 但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的.

vue父子组件通信高级用法

- - SegmentFault 最新的文章
vue项目的一大亮点就是组件化. 使用组件可以极大地提高项目中代码的复用率,减少代码量. 但是使用组件最大的难点就是父子组件之间的通信. . . // 参数就是子组件传递出来的数据.