webpack 打包时到底如何组织js
问题一:引入前端库,方法也是不一样的
比如 lodash.js ,作为一个 chunk 用 html-webpack-plugin 打包到页面里,会生成一个全局变量 window._ ,在其它 js 中不必 require('lodash'); 就可以直接使用 window._
比如 webpack-zepto,作为一个 chunk 用 html-webpack-plugin 打包到页面里,不会生成 window.$ ,如果在其它 js 中直接使用 window.$ ,就会报错。需要在其它 js 中 var $ = require('webpack-zepto'); 这样 zepto 和页面 js 会打包到一个文件里,体积太大,而且不利于浏览器缓存
为了有效利用浏览器缓存,避免单个 js 体积太大,我们希望每个前端库打包成一个 js ,和页面逻辑分开
问题二:CommonsChunkPlugin
针对上一个问题,大家会提出使用 CommonsChunkPlugin ,参考这里
然而,使用 CommonsChunkPlugin 后,被指定的公共文件成了 js 的入口,其它 js 包括其它前端库都依赖这个 js ,如:
entry : {
'lodash' : ['lodash'],
'zepto' : ['webpack-zepto'],
}, plugins : [
new CommonsChunkPlugin({
names : ['zepto', 'lodash']
}),
...
]
打包后的 zepto.js
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
打包后的 lodash.js
webpackJsonp([2],{ /***/ 0:
/***/ function(module, exports, __webpack_require__) {
那么必须指定 zepto.js 放在 lodash.js 的前面,不然就会报 webpackJsonp 未定义的错误!
然而原本 zepto 和 lodash 是没有相互依赖的关系的,能忍?
还有更不能妥协的场景,我要引入一个 jsA,它原本没有任何依赖,但它必须放在 head 里,因为它加载时会执行 document.write
打包时,我可以指定 jsA 放在 head 里,然而现在它依赖于 zepto 了,就必须把 zepto + jsA 放在 head 里
目前的解决方案:
不使用 CommonsChunkPlugin,每一个前端库,新建一个 js 专门 require 它,并生成一个全局变量,如:
lib/_zepto.js
window.$ = require("webpack-zepto");
然后作为一个 chunk 打包到页面中
这样解决了以上两个问题:
1. 每个前端库打包成一个独立 js,可以有效利用浏览器缓存,生成全局变量,页面 js 中可以直接使用
2. 不相互依赖的前端库位置随意,只要确保它们都在页面逻辑 js 前引入就可以了
抛砖引玉,请高手批评指正!谢谢!
webpack 打包时到底如何组织js的更多相关文章
- webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...
- js webpack打包时保留指定注释
optimization: { minimizer: [ new TerserJSPlugin({ terserOptions: { format: { comments: /(\s*#if)|(\s ...
- vue用webpack打包时引入es2015插件
1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...
- 使用vue+webpack打包时,去掉资源前缀
在build文件夹下找到webpack.prod.conf.js文件,搜索 filename: utils.assetsPath('css/[name].[contenthash].css'), 将[ ...
- Webpack打包时警告 - Critical dependency: the request of a dependency is an expression
关于解决 [Webpack] Critical dependency: the request of a dependency is an expression ------------------- ...
- 关于webpack,打包时遇到的错误
最近在研究webpack这玩意,然后遇到一个问题,执行npm run build的时候,出现下面这个问题,各种搜索后,各种尝试,都没解决 运行时报错ERROR in ./src/app.vue Mod ...
- nodejs+react使用webpack打包时控制台报错
一.错误:Uncaught ReferenceError: process is not defined 解决方法: new webpack.DefinePlugin({ 'process.env': ...
- 打包时ElementUI使vendor.js文件体量过大优化方法
<h1> 1.在index.html中以CDN的方式引入 </h1> <p> 引入的时候注意:要先在引入之前引入VUE否则会报undedined prototype ...
- webpack打包时删除console.log,和debugger
开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...
随机推荐
- bookshelf
nodejs mysql ORM 比node-mysql好用多了. bookshelf 支持restful功能,用到的时候研究下:https://www.sitepoint.com/getting-s ...
- 从0开始学Swift笔记整理(三)
这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...
- GitLab:解决Merge Request中Commits不更新的问题
最近在使用 GitLab 的 Merge Requests 功能进行 Code Review .操作流程是这样的: 1)开发人员A要给一个项目增加一个新功能,先在这个项目上创建一个 Git 分支. 2 ...
- uv纹理坐标设定与贴图规则
1.什么是UV? 对于三维模型,有两个最重要的坐标系统,一是顶点的位置(X,Y,Z)坐标,另一个就是UV坐标.什么是UV?简单的说,就是贴图影射到模型表面的依据. 完整的说,其实应该是UVW(因为 ...
- [安卓] 5、SeekBar拖动条
越来越发现这些控件用法大同小异了,这里注意几个函数:seekBar.setSecondaryProgress(0);设置初始进度为0,总共为0~99,对其监听用setOnSeekBarChangeLi ...
- [ACM_数学] Fibonacci Nim(另类取石子,2-4组合游戏)
游戏规则: 有一堆个数为n的石子,游戏双方轮流取石子,满足: 1)先手不能在第一次把所有的石子取完: 2)之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间(包含1和对手刚取的石子数的2倍). ...
- CSS关于元素垂直居中的问题
今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码 方法1: <div class="div1"> <d ...
- paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用.
paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用. #----为什么要设计堆栈,它有什么独特的用途? 为了性能 .... 堆比栈的性能 也有的说法为了编程容易...这个是错误的 ...
- springmvc中@PathVariable和@RequestParam的区别
顾名思义, @PathVariable和@RequestParam,分别是从路径里面去获取变量,也就是把路径当做变量,后者是从请求里面获取参数. 我的url; http://localhost:808 ...
- log4qt的使用
Log4Qt替换成新版本使其支持Qt5:https://github.com/devbean/log4qt/tree/master/src/log4qt 1. 解压log4qt到目标文件夹,如D:\Q ...