详解webpack提取第三方库的正确姿势

我们在用webpack打包是时候，常常想单独提取第三方库，把它作为稳定版本的文件，利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种

  1. CommonsChunkPlugin
  2. DLLPlugin

区别：第一种每次打包，都要把第三方库也运行打包一次，第二种方法每次打包只打包项目文件，我们只要引用第一次打包好的第三方压缩文件就行了

CommonsChunkPlugin方法简介

我们拿vue举例

const vue = require('vue')
{
 entry: {
 // bundle是我们要打包的项目文件的导出名字， app是入口js文件
 bundle: 'app'，
 // vendor就是我们要打包的第三方库最终生成的文件名，数组里是要打包哪些第三方库, 如果不是在node——modules里面，可以填写库的具体地址
 vendor: ['vue']
 },
 output: {
  path: __dirname + '/bulid/',
 // 文件名称
 filename: '[name].js'
 },
 plugins: {
 // 这里实例化webpack.optimize.CommonsChunkPlugin构造函数
 // 打包之后就生成vendor.js文件
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
 }
}

然后打包生成的文件引入到html文件里面

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

DLLPlugin方法简介

首先准备两个文件

  1. webpack.config.js
  2. webpack.dll.config.js

webpack.dll.config.js文件配置如下

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['vue', 'vuex']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

然后webpack.config.js 文件配置如下

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

html引用方式

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack 如何集成第三方js库

    详解webpack 如何集成第三方js库

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

  • 详解webpack提取第三方库的正确姿势

    我们在用webpack打包是时候,常常想单独提取第三方库,把它作为稳定版本的文件,利用浏览缓存减少请求次数.常用的提取第三方库的方法有两种 CommonsChunkPlugin DLLPlugin 区别:第一种每次打包,都要把第三方库也运行打包一次,第二种方法每次打包只打包项目文件,我们只要引用第一次打包好的第三方压缩文件就行了 CommonsChunkPlugin方法简介 我们拿vue举例 const vue = require('vue') { entry: { // bundle是我们要打

  • 详解webpack打包第三方类库的正确姿势

    webpack 的使用越来越广泛,但其中不乏很多鲜为人知的细节设置,甚至很多人会认为这是 webpack 的 bug.这次,我们就来聊一聊 webpack.optimize.CommonsChunkPlugin. 这个 plugin 我相信几乎90%的用 webpack 的都用了这个,但我同样相信几乎 90% 的用了这个 plugin 的人都没有正确的使用. entry: { index: './app/main.jsx', vendor: ['react', 'react-dom', 'rea

  • 详解webpack引入第三方库的方式以及注意事项

    一般情况下,我们不用担心所使用的第三方库,在npm管理仓库中找不到. 如果需要某一个库,如:jquery,可以直接运行npm install jquery脚本命令来安装这个项目所需要的依赖: 然后,在使用jquery的模块文件中,通过import $ from 'jquery'或者var $ = require('jquery')来引入. 这是常用的在webpack构建的项目中引入第三方库的方式. 注:为了更好的演示示例代码,示例是在nodemon这篇文章的基础上操作的. 但是,在不同的场景下,

  • 详解Python中第三方库Faker

    项目开发初期,为了测试方便,我们总要造不少假数据到系统中,尽量模拟真实环境. 比如要创建一批用户名,创建一段文本,电话号码,街道地址.IP地址等等. 平时我们基本是键盘一顿乱敲,随便造个什么字符串出来,当然谁也不认识谁. 现在你不要这样做了,用Faker就能满足你的一切需求. 1. 安装 pip install Faker 2. 简单使用 >>> from faker import Faker >>> fake = Faker(locale='zh_CN') >&

  • 详解webpack3编译兼容IE8的正确姿势

    上一篇中的方法在 webpack 更新后,uglify 缓存地址也发生了变化,需要重新找地址. 后来测试发现不论是 uglify-js2 uglify-js3 都是支持 IE8 兼容处理的. 但在 webpack.optimize.UglifyJsPlugin 中加配置参数却无效.(webpack 的锅) 总不能每次都手动去找 webpack 缓存路径进行劫持吧,那要疯了. UglifyjsWebpackPlugin 关键点依然在于UglifyjsWebpackPlugin插件,但并不是内置的

  • 详解iOS平台调用后台接口的正确姿势

    前言 做iOS开发,除非你做的是单机应用,否则一定避免不了接口调用,也就是所谓的API调用. 而对于这方面,每个公司定义接口的格式不尽相同,从而导致我们的代码没法达到通用. 甚至你接私活的话,更会遇到五花八门的接口格式.那么有没有一种通用的方式来处理这些不通用的格式呢? 我尝试从变化的接口格式中找到不变的东西,把这些不变的东西进行可配置,从而形成以不变应万变的接口调用方式. 这些不变的东西,包括如下几种: 错误码 错误消息 业务数据 而对于错误码又可以分如下几类: 成功 失败 token失效 基

  • 详解项目升级到vue-cli3的正确姿势

    一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解python的xlwings库读写excel操作总结

    一.总结(点击显示或隐藏总结内容) 一句话总结: xlwings 是 Python 中操作Excel的一个第三方库,支持.xls读写,.xlsx读写,操作非常简单,功能也很强大 1.xlwings 中的逻辑:应用->工作簿->工作表->范围 对应的代码? 应用:一个应用(一个xlwings程序):app = xw.App(visible=True, add_book=False) 工作簿(book):excel文件(excel程序):wb = app.books.add() 工作表(sh

随机推荐