webpack 性能优化(5)抽离公共代码
使用场景多页应用一般会重复多次使用部分公共代码,这样每次加载单页的时候,就会重复去加载这些公共代码,会造成以下问题:
相同资源重复被加载,浪费用户流量,增加服务器成本
每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验
如果将这些公共代码抽取出来,并让浏览器缓存起来,用户在请求资 ...
webpak 性能优化(4)tree-shanking&scope-hostig
两个webpack自带的优化:tree-shaking 和 scope-hosting 都是在生产(production)模式下
tree-shaking在 mode: production 下,使用 import 引入模块,打包时会忽略模块中没有使用的代码
举例:
Javascript// t ...
webpack 性能优化(3)happypack多线程打包
使用 happypack 模块进行多线程打包,适用于文件较大的情况,本身启动多线程需要耗费时间
安装 happypack
powershellyarn add happypack -D
修改配置文件,实现多线程打包 js 和 css
Javascriptlet path = require( ...
webpack 性能优化(2)DllPlugin&DllReferencePlugin
场景需求在打包一个 react 的项目的时候,会把 react 和 react-dom 这两个库打包进来。这两个库很大且基本不会变,所以如果每次打包都要打包这两个第三方包的话,浪费时间,消耗性能
所以可以将 react 和 react-dom 单独打包好,然后动态链接引入即可。第二次打包时,发现 ...
webpack 性能优化(1)
-
noParse 不解析没有依赖的库module 的 noParse 选项可以指定模块不进行依赖库的解析,直接进引入,加快打包速度;适用于引入一些没有依赖的独立的第三方库(例如 jquery)
正常引用 jquery import jq from jquery 时,会解析 jquery 库有没 ...
webpack 解决跨域问题
跨域问题基于浏览器的同源策略,即协议,域名,端口都一致浏览器才能发送请求,而服务端发送请求没有跨域的问题
使用 webpack 进行开发解决跨域问题主要有以下方法:
通过配置服务器代理不能操控后端代码时(比如前后端联调)可用
在配置文件 webpack.config.js 中添加 devSer ...
webpack 图片处理
三种引入图片的方式:
1在 js 中创建 Image 实例引入把图片当做模块引入
javascriptimport logo from "./logo.png"let img = new Image()img.src = 'logo'document.body.appendChild(img)
...
webpack 入门
概念webpack 是一个基于 NodeJS 开发的静态模块打包工具,
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图( dependency graph ),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle
代码构建是前端工程化,自动化的体现, ...
webpack 简单配置
单页应用单页,只有一个 index.html
src 文件下 index.js 引入了 a.js 模块,另外还有一个 b.js,将 index.js 和 a.js 作为入口打包成一个文件 build.js 引入页面内
javascript// webpack.config.jslet path ...
CommonJS规范和ES6模块规范
-
CommonJS规范Node 应用由模块组成,采用 CommonJS 规范
导出模块采用module.exports,module.exports是一个对象,也是导出的接口
导入模块采用require引入这个对象
javascript// example.jslet x = 5var add ...
