vue 文件多了， webpack 热加载很慢？ - V2EX
- -点我最近刚好在看 webpack，如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章，不要脸的放一下博客. 如果时间不够只是想解决这个问题，那么我尝试正儿八经回答一下. 1.把 webpack 升级到 4.0. 3.使用 DLLplugin,happypack 等构建加速插件. 4.检查 loader/eslint 是否配置错误 /不合理.
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
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] 推荐：
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来满足自己的需求.
ssr vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
- -This is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. #install dependenciesnpm install#or yarn#serve in dev mode, with hot reload at localhost:8080npm run dev#build for productionnpm run build#serve in production modenpm start.
webpack - Feature Flag 功能发布控制
- - SegmentFault 最新的文章很多时候我们会不小心把本地调试的代码发布掉，造成了线上的代码出现问题. 或者说暂时不希望某些正在开发的代码被执行，造成线上显示的不不正常或推迟上线. webpack.config.js里这样写. 配置完成后，我们可以这样写代码. 在webpack编译后会变成这个样子. 这个时候我们就要把 __DEBUG__设为 false了，这样在编译完成后就会变成这个样子.
Vue 移动端框架
- - IT瘾-jianshuvonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约. 中文文档| github地址| 在线预览. vux 基于WeUI和Vue(2.x)开发的移动端UI组件库. 基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式.
vue路由权限校验
- - 掘金前端做后台系统的时候，难免会有用户权限的判断. admin可以查看全部菜单，user只能查看部分菜单. 一开始接触这个需求的时候，完全是纯前端做的. 在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据. // 过滤路由 menuList-菜单 roles-用户角色
const checkMenuList = (menuList, roles) => {
for (let i = 0; i < menuList.length; i++) {.
提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园
- -本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了. 首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中.
聊一聊 webpack 的打包优化实践
- - 掘金前端去年接触了公司内一个开发运行了两年多的项目，整体应用是基于 React 技术栈的，多个单页应用有构成了多页应用. 可以理解为比较独立的子业务之间是 MPA 形式跳转，而子业务内部则是 SPA 形式. 项目的构建使用了 webpack，发现存在较大问题：. 在生产环境上线编译大致需要 13 min+；.