Webpack抽离第三方类库以及common解决方案
前端构建场景有两种，一种是单页面构建，另一种是多入口构建多页面应用程序（我视野比较小，目前就知道这两种），下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案。
如果有哪些地方优化不周到，请指点一二，另外求关注求星星，么么哒
单页面构建：
常规配置
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode: "development",
entry: {
app: './app.js'
},
output: {
path: path.resolve(__dirname, './build/'),
filename: "bundle-[chunkhash:8].js"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // translates CSS into CommonJS
'less-loader', // compiles Less to CSS
],
exclude: /node_modules/
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [{
loader: 'file-loader',
options: {
limit: 1024,
}
}],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[chunkhash:8].css",
chunkFilename: "[id].[chunkhash:8].css"
}),
new HtmlWebpackPlugin({
title: 'webpack',
template: './index.html',
chunks: ['app']
}),
new CleanWebpackPlugin()
],
}
在脚本种我们常规写法是这样的
require('./main-less.less');
require('./main-css.css');
const ReactDOM = require('react-dom');
const React = require('react');
import Main from './main.js';
// /**
// * 引入 scope hisiting test
// */
// import B from './ScopeHisitingTest/b';
ReactDOM.render(
<Main />,
document.getElementById('app')
)
我们看下构建输出结果
现在我们看到这个应该思考三个问题
1.脚本部分，难道每个页面都要写一边import React&ReactDOM 吗
2.构建体积能不能再缩小一点
3.构建速度能不能在快一点
以上三个问题都会在开发过程中耽误开发效率，我们开始处理这三个问题
方案1
html全局引用第三方类库，比如React，因为React源码中将React挂在到了window上，这么做解决了什么呢，脚本里面我们不用在每一个页面中引用第三方类库了，我们看下代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
</head> <body>
<div id='app'></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</body> </html>
好了解决了脚本部分不用每个页面都需要import一次了
构建体积怎么减小呢
这里我们可以借助webpack插件，下面我们上代码
externals: {
'react': 'react',
'react-dom': 'react-dom'
},
我们将两个第三方类库打包的时候不依赖进去，通过这种方式告诉webpack，在构建过程中引用react以从内存中引用的方式，我们看下打包效果
可以明显的看到，采用这种用法之后会有一个问题就是，我们在目标脚本文件里面就不能在引用第三方类库了，不然打包进去，external会以具体文件形式引用第三方类库，从而导致找不到而报错，直接用就好了，我们毕竟要解决的就是这个问题嘛。
以上就是第一种解决方案，当然这并不是根本的解决方案，只是个大体思路，我们可以再改进一下。
第二种
通过组织模块的形式包装第三方类库，从而打到第三方类库挂载到全局的效果
首先创建一个用来专门打包第三方的webpack
const path = require('path');
module.exports = {
mode: 'development',
entry: {
app: './vendorentry.js',
},
output: {
path: path.resolve(__dirname, './vendor/'),
filename: "dll.js",
library:'util',
libraryTarget: 'window'
},
}
这里就不做任何优化了，毕竟打包第三方的，我们也不需要在提取什么文件了。这里注意的是通过组织模块打包方式libraryTarget，以及暴露给全局的名称util。
创建一个入口文件，来引用第三方类库的集合
import $ from "jquery";
import React from "react";
import ReactDOM from "react-dom"; window.React = React;
window.ReactDOM = ReactDOM;
window.$ = $; export { $, React, ReactDOM };
输出结果
所有的第三方都在util下，其实我们只是规定了在业务逻辑的webpack中要以某种形式去加载，而不是打到最终包里，这就是我们的核心目的。
html中可以动态替换目标dll，配置如下
new HtmlWebpackPlugin({
templateContent: () => {
let template = path.resolve(__dirname, './index.html');
return read(template)
.toString()
.replace('$dll$', '../vendor/dll.js');
},
title: 'index',
template: './index.html',
filename: 'index.html',
chunks: ['app'],
hash: true
}),
业务逻辑webpack配置
externals: {
'react': 'window.util.React',
'react-dom': 'window.util.ReactDOM',
'jQuery': 'window.util.jquery',
'$': 'window.util.jquery'
}
第三种
第三种方式采用将第三方类库打包到指定的dll中，通过webpack构建应用时引用
涉及两个Plugin，分别是DllReferencePlugin，DllPlugin
首先创建一个专门针对dll的webpack配置文件
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
react: [
'react',
'react-dom'
]
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, './distDll/dll/'),
library: '[name]_dll_[hash]'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_dll_[hash]',
context: __dirname,
path: path.join(__dirname, 'distDll/dll', '[name].manifest.json')
})
]
}
然后执行这个webpack，生成dll以及描述模块运行依赖的manifest.json，我们应用的webpack需要引用这个dll
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./distDll/dll/react.manifest.json')
}),
到这里就结束了吗，并不是，我们执行下webpack会发现，React找不到了，我们首先考虑到什么，难道是external的问题吗，你会发现跟它一点关系没有，难道我们每次写还要导入第三方类库吗，解决方案
ProvidePlugin
new webpack.ProvidePlugin({
'React': 'react',
'ReactDOM': 'react-dom'
})
这样就解决了这个问题，我们看下构建效果
同样也达到了我们的目的。
多入口
多入口采用optimization分离，其实与多页面分离第三方与common部分的用法是一样的，我们就跟多页面一起具体了。
多页面解决方案
基本配置
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app1: './app1.js',
app2: './app2.js'
},
output: {
path: path.resolve(__dirname, './build/'),
filename: "[name]-[chunkhash].js"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
'less-loader',
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
'cache-loader',
{
loader: 'babel-loader',
}
],
exclude: /node_modules/
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash:5].css',
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'index1',
template: './index1.html',
filename: 'index1.html',
chunks: ['app1', 'common'],
// hash: true
}),
new HtmlWebpackPlugin({
title: 'index2',
template: './index2.html',
filename: 'index2.html',
chunks: ['app2', 'common'],
// hash: true
}),
new webpack.HashedModuleIdsPlugin(),
],
}
打包效果
问题很明显，速度慢，体积过大，这里还有个问题就是，app1的与app2引用共同的文件导致的体积过大，也就是我们要解决的如何提取common部分的问题，这里我们就不讨论脚本import 第三方的问题了，上面有解决方案了。
提取common部分
optimization: {
runtimeChunk: {
"name": "manifest"
},
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
common: {
test: /\.(s*)js$/,
chunks: 'all',
minChunks: 2,
minSize: 0,
name: 'common',
enforce: true,
priority: -11
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
priority: -10,
chunks: 'all',
reuseExistingChunk: true,
enforce: true
},
style: {
name: 'style',
test: /\.less$/,
chunks: 'all',
enforce: true
}
}
},
runtimeChunk:{
name:'manifest'
}
},
这里我们要做的是，提供commonjs，合并css（提取common部分也是可以的，毕竟页面也不可能用全部的css，做法与提取commonjs是一样的，配置minChunks最小为2就可以了），提供第三方类库。
我们看下打包效果
速度提升了，同时生成了common文件以及提三方文件集合verndors文件，嗯，目前解决了我们要解决的问题，上面单页面场景同样适用，浏览器缓存这个一般不会变得vendors，也达到了提升效率问题，
但是有没有想过一个问题，就是每一次webpack构建过程，是不是都要打一次这个包呢，浪费时间了吧，于是我们采用什么方式呢，没错~采用DllPlugin与DllReferencePlugin来提取一次第三方，
剩下common部分每一次构建都去重新打一次。
代码同样引用dll
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./distDll/dll/react.manifest.json')
})
构建效果
效果就是大幅度提升构建速度。
最终配置文件
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app1: './app1.js',
app2: './app2.js'
},
output: {
path: path.resolve(__dirname, './build/'),
filename: "[name]-[chunkhash].js"
},
devtool: "source-map",
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
// options: {
// sourceMap: true,
// modules: true,
// localIdentName: '[name]---[local]---[hash:base64:5]'
// }
},
'less-loader',
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: [
'cache-loader',
{
loader: 'babel-loader',
options: {
// cacheDirectory: path.join(__dirname,'./build/', 'babel_cache')
// happyPackMode: true,
// transpileOnly: true
}
}
],
exclude: /node_modules/
}
]
},
optimization: {
runtimeChunk: {
"name": "manifest"
},
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
common: {
test: /\.(s*)js$/,
chunks: 'all',
minChunks: 2,
minSize: 0,
name: 'common',
enforce: true,
priority: -11
},
// vendors: {
// test: /[\\/]node_modules[\\/]/,
// name: "vendors",
// priority: -10,
// chunks: 'all',
// reuseExistingChunk: true,
// enforce: true
// },
style: {
name: 'style',
test: /\.less$/,
chunks: 'all',
enforce: true
}
}
},
runtimeChunk:{
name:'manifest'
}
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash:5].css',
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'index1',
template: './index1.html',
filename: 'index1.html',
chunks: ['app1', 'common'],
// hash: true
}),
new HtmlWebpackPlugin({
title: 'index2',
template: './index2.html',
filename: 'index2.html',
chunks: ['app2', 'common'],
// hash: true
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./distDll/dll/react.manifest.json')
})
],
}
以上就是针对webpack构建优化全部总结，涉及第三方抽取，common抽取等问题。
求个关注~谢谢，么么哒~
Webpack抽离第三方类库以及common解决方案的更多相关文章
- webpack配置：打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源
一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...
- webpack快速入门——实战技巧：优雅打包第三方类库
下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...
- @ResponseBody 返回json字符串的核心类是org.springframework.http.converter.json.MappingJacksonHttpMessageConverter，它使用了Jackson 这个开源的第三方类库。主要是以下两个jar包：jackson-core-asl-1.6.4.jar；jackson-mapper-asl-1.6.4.jar
@ResponseBody 返回json字符串的核心类是org.springframework.http.converter.json.MappingJacksonHttpMessageConvert ...
- iOS 如何在一个已经存在多个project的workspace中引入cocoapods管理第三方类库
一种新的第三方库管理工具:Carthage 如何使用Carthage管理iOS依赖库 Podfile Syntax Reference v1.1.0.rc.3 https://guides.cocoa ...
- 使用cocoapods管理第三方类库
前言 在iOS项目中使用第三方类库可以说是非常常见的事,但是要正确地配置他们有时候是非常繁琐的事情,幸运的是CocoaPods是一个很好的解决方案. 什么是CocoaPods CocoaPods是OS ...
- iOS开发 使用Cocoapods管理第三方类库
每次上github看到一些优秀的代码,总能看到Podfile,也了解是个管理第三方类库的,今天抽时间学习了一下,挺简单的! 作用: 太多 还是复制一下把!!! CocoaPods是什么? ...
- Laravel 引入第三方类库及自定义函数
1.新建一个目录放第三方类库 2.找到composer.json文件打开,在里面autoload 下classmap下面加入类库路径 3根目录下运行composer dumpautoload 4.使用 ...
- Android Studio导入第三方类库的方法
Android Studio导入第三方类库的方法 本人也刚刚开始尝试做android app的开发,听说android studio是Google支持的android 应用开发工具,所以想应该肯定比E ...
- iOS 常用第三方类库、完整APP示例
一.第三方类库 1:基于响应式编程思想的oc地址:https://github.com/ReactiveCocoa/ReactiveCocoa2:hud提示框地址:https://github.com ...
随机推荐
- ES Templates push
{ "order": 0, "template": "connector-connection*", "settings" ...
- Jquery 实现原理深入学习(3)
前言 1.总体结构 √ 2.构建函数 √ 3.each功能函数实现 √ 4.map功能函数实现 √ 5.sizzle初步学习 6.attr功能函数实现 7.toggleClass功能函数实现(好伤) ...
- IPC thread写法太晦涩
主要用到TLS,首次进入gHaveTLS为false,锁保护说明此函数很多其他函数在调用.通过if (pthread_key_create(&gTLS, threadDestructor) ! ...
- 【TensorFlow】自主实现包含全节点Cell的LSTM层 Cell
0x00 前言 常用的LSTM,或是双向LSTM,输出的结果通常是以下两个:1) outputs,包括所有节点的hidden2) 末节点的state,包括末节点的hidden和cell大部分任务有这些 ...
- 工业界 vs. 学术界： 一个年轻员工的视角
本文发表于<中国计算机学会通讯>2015年第5期,转载已获得授权 作者:菲利普·郭 (Philip Guo),美国罗切斯特大学助理教授 译者:王长虎,微软亚洲研究院主管研究员 如果你即将 ...
- diary20180428
17:05:59 今天早晨去了图书馆.学习了一把vscode.试图在河边看电脑,总有小虫不让我专心. 23:27:34 看纯黑直播打战神,有点感触. 动漫或游戏,角色觉醒,实力大增,小时候(甚至现在) ...
- python通用读取vcf文件的类（可以直接复制粘贴使用）
前言 处理vcf文件的时候,需要多种切割,正则匹配,如果要自己写其实会比较麻烦,并且每次还得根据vcf文件格式或者需要读取的值不同要修改相应的代码.因此很多人会选择一些python的vcf的库,但 ...
- 微服务SpringBoot总结
什么是SpringBootSpringBoot是Spring项目中的一个子工程,与我们所熟知的Spring-framework 同属于spring的产品官方介绍:Spring Boot makes i ...
- C++扬帆远航——9（小学生算数程序）
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:studentjishu.cpp * 作者:常轩 * 微信公众号 ...
- VM安装Linux Centos7.0虚拟机
一.准备工作 1.安装VMware 官网https://www.vmware.com/cn.html 2.准备centos7的镜像文件 官网下载链接:http://isoredirect.centos ...