![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 58
stubborn丶lili
这个作者很懒,什么都没留下…
展开
-
yarn workspace的用法
1.1 全局安装1.2 使用1.2.1 新建一个项目比如1.2.2 初始化1.2.3 安装一个依赖比如lodash1.2.4 新建main.js文件并导入使用// main.js项目结构如图现在其它项目再去下载 lodash 速度将大大提升,当然了,仅仅一个依赖包是体现不出来的。原创 2022-11-14 18:12:06 · 1007 阅读 · 0 评论 -
前端发版后浏览器缓存问题
开发完发布新版本后,在有些电脑上总需要强刷才能获取到最新版本的内容,太恶心了。浏览器缓存是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。附:前端缓存详解,看了这篇更容易理解缓存配置的概念,浏览器缓存主要有两类:协商缓存 和 彻底(强)缓存。原创 2022-11-02 09:43:54 · 2673 阅读 · 0 评论 -
vue-cli分模块打包,根据每个模块独立打包并且独立运行
随着项目的需求越来越多,单界面应用可能已经无法满足现在的需求了。所以,这个时候需要进行根据模块来打包项目。根据公司的要求,我这边想到一个两个方法来进行模块化打包每个项目的路由是个单独的独立文件,根据模块的选择进行路由的配置打包。这里我就不详细讲解了。有一些前端开发基础的人,基本上都可以很好的完美的理解到重点文件目录新建文件config.jsvue.config.js配置使用cross-env在pageage.json进行设置打包之后的文件展示效果来源链接:https://www.j原创 2022-07-06 11:42:03 · 3051 阅读 · 0 评论 -
cross-env的使用
cross-env怎么使用,作用是什么,根据官网的解释它是这样子的简而言之个人的理解是:官网地址:安装:官网的案例:衍生可以给NODE环境设置一个变量,通过process.env.xxxxx来获取,我们根据相对应的变量进行不同的配置。这个段代码我们设置了一个PROJECT_NAME的变量,通过process.env.PROJECT_NAME来获取到变量的值oneProject 。...原创 2022-07-06 11:38:46 · 1105 阅读 · 0 评论 -
webpack优化性能
废话不多说,先看看对比成果!类型 优化前 优化后 js文件大小 24MB 3MB 主页首屏显示 9s 1s 可以看到,优化前后首屏加载速度有质的提升,之前一直想优化我们项目的首屏加载时间,有缓存还好,没有缓存屏幕白屏都要等待7、8s。特别是有的客户第一次打开这个系统,那7、8秒犹如过了一个世纪,非常尴尬。那么我做了哪些常规操作呢?1.生产环境关闭productionSourceMap、css sourceMap众所周知,SourceMap就是当页面原创 2022-04-14 10:22:27 · 326 阅读 · 0 评论 -
webpack一个命令同时打包三个不同环境的项目
3. 配置环境变量不允许有空格, 多个应用的环境变量名不允许重复,经检测, 发现环境变量值是通过字符串解析的, 如果增加window变量, 解析会有误, 需在vue.config.js中修改底层源码原创 2021-10-22 17:06:24 · 802 阅读 · 2 评论 -
自定义package多包管理项目
1. 新建package目录存放包2. 在package目录新建包名 framework, 在framework目录中初始化package.jsonyarn init -y3. 将公共的组件模块都提取出来4. 将项目1, 项目2中需要依赖的包名(即: dependencies中的包名) 添加到 framework中的package.json中的dependencies中, 如图上5. 将项目1, 项目2中package.json中的dependencies属性指向到包名...原创 2021-09-18 14:50:51 · 482 阅读 · 0 评论 -
性能优化——提高webpack打包速度
1. 将第三方包使用外链的方式加载步骤1: 把需要使用外链的包定义为一个对象const link = { externals: { "monaco-editor": "monaco", "monaco-editor/esm/vs/editor/editor.api": "monaco", //把react-monaco, 'clsx': 'clsx', 'axios': 'axios', "react": "React", "react-dom"原创 2021-09-14 11:51:11 · 1248 阅读 · 0 评论