webpack 3 优化
编译时间太长
项目为多页面应用时,编译的时候每个入口都会读取依赖的路径,所以入口越多,会导致编译越慢
公用库提取
除了公用的框架(如 Vue、React)以外,不同页面所需要的第三方库可能不一样,而且部分第三方库(如富文本编辑器、SDK)仅在特定页面引用。全部打包为 vendor 会导致其他页面也加载不必要的第三方库,增加加载时间
优化方案1
特定页面的第三方库直接引入 CDN 文件,不经过 webpack 读取路径
这样能特定的页面加载特定的第三方库,在页面加载 vendor 时不会浪费过多的时间
但是,这样并不能解决编译时间太长
优化方案2
使用 webpack 的 plugin:DllPlugin 和 DllReferencePlugin
这两个插件可以将公共的第三方库打包为 Dll (动态链接库),同时由 Dll 告诉 webpack ,哪些库不需要读取及打包, webpack 就不会在每次编译时都重复读取依赖,可以减少大量的编译时间。
同时由于提取了公用库,每个页面仅加载最基础的库(如 Vue、Vuex、Vue-Router),可以减少加载时间。
特定的页面引入特定的第三方库,可由 CDN 引入
DllPlugin 和 DllReferencePlugin 使用方法
创建 webpack.vendor.build.conf.js 文件
// webpack.vendor.build.conf.js
const path = require("path")
const webpack = require("webpack")
const config = require('./config')
process.env.NODE_ENV = 'production' // 将 NODE_ENV 设置为 production 可减少依赖的大小
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
vendor: config.common.vendor // 公用第三方库
},
output: {
path: resolve('dll'),
filename: '[name].js',
library: '[name]'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
}
}),
new webpack.DllPlugin({
path: resolve('dll/manifest.json'),
name: '[name]'
}),
// 压缩代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_funcs: ['console.log']
},
sourceMap: true
}),
]
}
运行 node webpack.vendor.build.conf.js
会在上级目录生成 dll 文件夹,里面有 vendor.js 及 manifest.json
接着,在构建文件中增加
// webpack.prod.conf.js
// ...
const manifest = require('../dll/manifest.json')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
// ...
// 引入 manifest,让 webpack 跳过公用库
new webpack.DllReferencePlugin({
manifest
}),
// 将 vendor 注入到 生成的 html 模板中
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../dll/vendor.js'),
includeSourcemap: false,
// hash: true,
})
}
webpack 3 优化的更多相关文章
- webpack性能优化——DLL
Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- webpack 性能优化 dll 分包
webpack 性能优化 dll 分包 html-webpack-externals-plugin DLLPlugin https://www.webpackjs.com/configuration/ ...
- webpack打包优化点
目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...
- webpack 使用优化指南
前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...
- webpack使用优化(基本篇)
转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老 ...
- 记一次webpack打包优化
未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不 ...
- webpack打包优化之外部扩展externals的实际应用
目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...
- (webpack系列二)webpack打包优化探索
虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...
随机推荐
- Ajax的包装
/** * Created by Administrator on 2016/12/27. *//** * 创建XMLHttpRequest对象 * @param _method 请求方式: post ...
- [hdu4372]counting buildings
解题关键: n的环排列的个数与n-1个元素的排列的个数相等. 首先可以肯定,无论从最左边还是从最右边看,最高的那个楼一定是可以看到的,从这里入手. 假设最高的楼的位置固定,最高楼的编号为n,那么我们为 ...
- Spring的概况
----------------siwuxie095 Spring 的简介 Spring 是一个轻量级 控制反转(IoC) 和 面向切面(AOP) 的容器框架 年,它是为了解决企业应用开发的复杂性而诞 ...
- 具体问题:Spring 事务的隔离性,并说说每个隔离性的区别
使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...
- CF1042E Vasya and Magic Matrix
感觉不会期望. 首先把所有格子按照权值从小到大排一下序,这样一共有$n * m$个元素,每个元素有三个属性$x, y, val$. 下文中的下标均为排序后的下标. 这样子我们就可以推出公式: $f_i ...
- 1.sql注入原理
一.什么是sql注入呢? 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露V ...
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
- Django 之 auth 模块
Django 内置一个 auth 模块,帮助用户实现注册.登录.注销以及修改密码等功能,帮助开发者省去了很多功夫. auth 模块 在创建模型时,Django内部会生成一个名为 auth_user 的 ...
- jquery对象访问
jquery对象访问 方法名 说明 语法 (callback 执行的函数,object指定元素的对象.) each() 用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数 jQu ...
- Java中的变量传递机制以及JS中的参数传递机制
JAVA: 传递基本类型是 就是基本的值传递 不会影响值本身. package com.wuqi.p1; public class ValuePassTest { public static void ...