webpack 优化代码 让代码加载速度更快
一,如何优化webpack构建
(1),缩小文件搜索范围,
- 优化Loader配置
module.exports = {
module: {
rules: [
{
test:/\.js$/,
use:['babel-loader?cacheDirectory'],
include: path.resolve(__dirname,'src') }, ]
}
}我们可以适当的调整项目的目录结构,方便在配置Loader时候通过include缩小命中范围。
- 优化resolve.modules的配置
resolve.modules的默认值是node_modules,如果没有就去上一层文件去寻找,以此类推,
当安装的第三方模块放在根目录./node_modules的时候,就没必要按照默认方式去找,减少寻找配置如下:module.exports = {
resolve:{
modules: [path.resolve(__dirname, 'node_modules')]
}
} - 优化resolve.mainFields配置
我们安装的第三方的模块都会有pack.json文件,resolve.mainFields用来配置入口文件。
当target为web时或者webworker,其默认值为['browser','main','module']
当target为其他情况时:其默认值为['main','module']
为了减少搜索步骤,由于是第三方模块都采用main字段去描述入口文件,所以如下配置:module.exports = {
resolve:{
mainFields: ['main']
}
}
未完待续。。。。。。。。。。。。
webpack 优化代码 让代码加载速度更快的更多相关文章
- Vue代码分割懒加载的实现方法
什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...
- java对象的方法属性和代码块的加载顺序
1.静态变量 2.静态代码块 3.局部代码块 4.构造函数 5.普通代码块 6.静态方法 7.普通方法 8.普通属性 for example: package com.JavaTest2; publi ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- hexo next主题深度优化(二),懒加载。
文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- JavaScript 放置在文档最后面可以使页面加载速度更快
JavaScript 放置在文档最后面可以使页面加载速度更快
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- 前端性能优化之按需加载(React-router+webpack)
一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近 ...
- [原创]Android Lollipop (5.0) 原生代码 Settings 首页加载逻辑分析
主入口为com.android.settings.Settings. 这只是一个wrapper的类, 它继承于 SettingsActivity类,并且声明了一堆公有的继承于SettingsActiv ...
- 检测js代码是否已加载的判断代码
该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...
随机推荐
- tableview setData 设置数据(结构体对象)
定义设置的对象类型 Q_DECLARE_METATYPE(LISTITEMDATA *) 设置数据类型 LISTITEMDATA *ptask = &(const_cast<LISTIT ...
- Data truncation: Out of range value for column 'id' at row 1 ### The
org.springframework.dao.DataIntegrityViolationException: ### Error updating database. Cause: com.mys ...
- java断言 assert
关于assert的用法网上教程很多,这里就不说了,只演示一下运行时开启断言的方法. public class A{ public static void main(String[] args){ Cl ...
- SQL Server ->> T-SQL查询面试题之实例版
1 - 3 题: 数据表结构: OrderID ProductID OrderDate SaleAmount 1 1 2015-01-01 100 2 6 2015-02-01 900 3 1 ...
- 【Leetcode】【Medium】Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. For example, ...
- 属性锁TimeLock
属性锁TimeLock 这是本人所写的几个类,用于对属性设置值时进行锁定与解锁,适用于高逼格动画当中. 源码: TimeLock.h 与 TimeLock.m // // TimeLock.h // ...
- 解决zabbix3.4X图形页面中文乱码
解决zabbix3.4X页面中文乱码 1.在windows的C:\Windows\Fonts找到字体文件simkai.ttf2.在zabbix服务器上找到zabbix默认字体文件graphfont.t ...
- 虚拟机装ubuntu (kylin) 时常遇问题
在想保留Windows操作系统的同时还能用Linux进行学习和开发,安装双系统或安装虚拟机都是不错的选择,依个人情况而定. (P.S:此行留给后期会写的双系统博客) 这篇文章收集了自己在用VMware ...
- background-color和background-image相关细节
1.background-color 是以border-box作为他的左上角来定位的 2.background-image 默认是以padding-box作为他的左上角来定位的 3.backgroun ...
- 【转】spring boot web相关配置
spring boot集成了servlet容器,当我们在pom文件中增加spring-boot-starter-web的maven依赖时,不做任何web相关的配置便能提供web服务,这还得归于spri ...