webpack代码分割;

var webpack=require(‘webpack‘)
var path=require(‘path‘)

module.exports={
entry:{
‘pageA‘:‘./src/pageA‘,
‘pageB‘:‘./src/pageB‘,
‘vendor‘:[‘lodash‘]

},
output:{
path:path.resolve(__dirname, ‘./dist‘),
filename:‘[name].bundle.js‘,
    chunkFilename: "[name].chunk.js"
},
plugins:[
   new webpack.optimize.CommonsChunkPlugin({
        name:‘vendor‘,
        minChunks:Infinity //不需要任何重复了
    }),

]

}
这是添加了vender的,没加之前是有pageA,和pageB,然后引入subpagea,和subpageb,nodule。然后生成了个common.bundle.js里面就有了代码的重复块,提取出了代码重复快。subpagea,和subpageb,noduleminChunks:2就是配置的重复代码的提取。后面又添加一个插件,但是打包以后代码混在了一起
new webpack.optimize.CommonsChunkPlugin({
        name:‘manifest‘,
        minChunks:Infinity //这是是为了把webpack的代码和插件的代码区分开
    })

这里是webpcak的代码和插件代码的分离。

 


原文地址:https://www.cnblogs.com/manu-yyj/p/9297391.html

时间: 2024-10-17 20:00:58

webpack代码分割;的相关文章

webpack 代码分割一点事

webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是chunkId与moduleId? 每个chunkId对应的是一个js文件,每个moduleId对应的是一个个js文件的内容的模块(一个js文件里面可以require多个资源,每个资源分配一个moduleId),所以它两的关系就是一个chunkId可能由很多个moduleId组成. 在webpack

webpack练手项目之easySlide(二):代码分割

Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack只是将所有资源打包到一个JS文件中而已,并没有做到真正的按需加载,这当然不是我们所想要的. 不急,今天的这一章我们就来一起继续探索webpack的另外一个功能:code split. 1.什么是code split  英文不好,暂且将其翻译为代码分割.也就是我们根据实际业务需求

The way of Webpack learning (III.) -- codeSplitting & lazyLoding(代码分割和路由懒加载)

代码分割:对于一个大型的web项目来说,如果为了减少http请求,只打包出一个bundle.js文件,那么只要我们的需求修改了一点点,整个bundle.js都需要重新加载,得不偿失.所以我们不妨把代码分割成一块一块的,按需加载,而且还能利用浏览器缓存机制,如果文件没有修改,直接从缓存读取.也就是说,代码分割就是把代码切成很多块(chunk). 懒加载:按需加载,页面需要什么文件我才去加载什么文件.我现在只知道应用在路由懒加载中,就是根据路由,按需加载不同的文件. 在上一章节提到使用Commonc

webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的. 目前webpack针对此项功能提供 2 种函数: import(): 引入并且自动执行相关 js 代码 require.ensure(): 引入但需要手动执行相关 js 代码 本文将会进行逐一讲解. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 此次代码

React中的代码分割

代码分割想要解决的问题是:经打包工具??生成的bundle文件过大,特别是在我们引入第三方库的情况下. 在React中,我们有一下几种解决方案: 1. 动态加载 1 // math.js 2 export function add(a, b) { 3 return a + b 4 } 5 6 // 未使用动态加载 7 import { add } from './math.js' 8 console.log(add(10, 20)) 9 10 // 使用动态加载 11 import("./mat

Webpack 代码分离

Webpack 代码分离 提示: 版本问题 本文基于 webpack 2.x 版本.webpack 2.x 相比 webpack 1.x 有重大改变.所以,如果你的项目中已使用了 webpack 1.x ,本教程的示例将不适用,请慎重. 如果铁了心要升级 webpack ,请参考 webpack 官方文档 - 从 v1 迁移到 v2 阅读建议 阅读本文前,建议先阅读 Webpack 概念 . 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然

webpack 代码拆分,按需加载

转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅

webpack -- 代码压缩

一.代码压缩坑 正常情况下,如果我们配置生成环境,webpack会自动帮js压缩,必须配置--mode=production scripts: { "build": "webpack --mode-production" } 但是如果我们要把css也压缩的话,问题就来了,css压缩 npm install optimize-css-assets-webpack-plugin --save-dev npm install cssnano --save-dev 调用 c

关于代码分割

省略废话. 1.ES6之前两个比较流行的模块机制CommonJS和AMD.CommonJS模块就是对象,加载模块时加载的是拷贝:而ES6加载的是对export的引用. 2.ES6模块不是对象,使用可出现在模块顶层任何位置的export显式指定输出的代码(变量.函数.class): export: export var name='microsoft'; ---another example 推荐在底部用{}输出需要的代码 var  value_x='microsoft'; export { va