webpack优化记录
什么是Webpack . ( 模块打包机,分析项目结构,找到js不能识别的代码语言,转换和打包后,供browser使用 )
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是:(从项目index.js入口开始, 找出所有依赖文件, 用loaders加载器加工, 最后转换打包成brower能识别的js文件)
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
减小文件搜索范围
在使用实际项目开发中,为了提升开发效率,很明显你会使用很多成熟第三方库;即便自己写的代码,模块间相互引用,为了方便也会使用相对路劲,或者别名(alias
);这中间如果能使得 Webpack
更快寻找到目标,将对打包速度产生很是积极的影响。于此,我们需要做的即:减小文件搜索范围,从而提升速度;实现这一点,可以有如下两法:
配置 resolve.modules
Webpack的resolve.modules
配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue'
这样不是相对、也不是绝对路径的写法时,会去 node_modules 目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个 node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules
的全路径;同样,对于别名(alias
)的配置,亦当如此:
webpack优化记录的更多相关文章
- 记一次真实的webpack优化经历
前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0.整个项目大概有80多个vue文件,也算不上什么大型项目. 只不过每次头疼的就是打包所耗费的时间平 ...
- VS2010/2012配置优化记录笔记
VS2010/2012配置优化记录笔记 在某些情况下VS2010/2012运行真的实在是太卡了,有什么办法可以提高速度吗?下面介绍几个优化策略,感兴趣的朋友可以参考下,希望可以帮助到你 有的时候V ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
- webpack快速入门——实战技巧:webpack优化黑技能
1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...
- 浅谈webpack优化
webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和ex ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- 浅探webpack优化
由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相 ...
- 常用的webpack优化方法
1. 前言 关于webpack,相信现在的前端开发人员一定不会陌生,因为它已经成为前端开发人员必不可少的一项技能,它的官方介绍如下: webpack 是一个模块打包器.webpack的主要目标是将 J ...
- webpack优化之玩转代码分割和公共代码提取
前言 开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码).当项目业务越来越复杂,打包出来 ...
随机推荐
- 计算概论(A)/基础编程练习2(8题)/8:1的个数
#include<stdio.h> int main() { ; // 存储测试数据的二进制形式中1的个数 int bian[N]; // 输入十进制整数N 表示N行测试数据 scanf( ...
- Eloquent JavaScript #03# functions
索引: let VS. var 定义函数的几种方式 more... 1.作者反复用的side effect side effect就是对世界造成的改变,例如说打印某些东西到屏幕,或者以某种方式改变机器 ...
- inst_for_mysql5.7.sh
#!/bin/bash # Author: wangshenjin<wangshenjin233@foxmail.com> # Description: install percona-s ...
- Docker学习笔记之常见 Dockerfile 使用技巧
0x00 概述 在掌握 Dockerfile 的基本使用方法后,我们再来了解一些在开发中使用 Dockerfile 的技巧.这一小节的展现方式与之前的略有不同,其主要来自阅读收集和我自身在使用中的最佳 ...
- poj 2942 Knights of the Round Table - Tarjan
Being a knight is a very attractive career: searching for the Holy Grail, saving damsels in distress ...
- centos7 yum install timeout
https://yum.dockerproject.org/repo/main/centos/7/repodata/repomd.xml: [Errno 12] Timeout on https:// ...
- centos7 update network time
yum install -y ntp crontab -e */5 * * * * /usr/bin/ntpdate ntp.api.bz ### ntp.api.bz 是一组NTP集群服务器,之 ...
- android 去掉主题
1 可以在xml中配置2.0之后 <application android:allowBackup="true" android:icon="@drawable ...
- SVM学习笔记4-核函数和离群点的处理
核函数在svm里,核函数是这样定义的.核函数是一个n*n(样本个数)的矩阵,其中:$K_{ij}=exp(-\frac{||x^{(i)}-x^{(j)}||^{2}}{2\sigma ^{2}})$ ...
- Delphi xe5 编译报environment.proj错误的解决
Delphi xe5 在Win64位下编译报 environment.proj 错误,网上有说明: http://hi.baidu.com/fly_king1228/item/9c85fccd8db4 ...