Is Webpack Packaging Too Slow? Try the Bundleless Mode

1. Introduction

2. Differences between the Bundle and Bundleless Modes from the Resource Loading Perspective

The Webpack-Based Bundle Mode

The ESModule-Based Bundleless Mode

Summary

3. Implementing the Bundleless Mode

Loading Modules Using ESModule

Set Type=”module” to Enable ESModule

<div id="root"></div>
<script type="module">
// Enable ESModule by setting type="module" in the script tag.
import React from 'https://cdn.pika.dev/react'
import ReactDOM from 'https://cdn.pika.dev/react-dom'
ReactDOM.render('Hello World', document.getElementById('root'))
</script>

Use Import-Maps to Support Bare Import

<div id="root"></div>
<! -- Enable chrome://flags/#enable-experimental-productivity-features -->
<script type="importmap">
{
"imports": {
"react": "https://cdn.pika.dev/react",
"react-dom": "https://cdn.pika.dev/react-dom"
}
}
</script>
<script type="module">
// Support bare import.
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render('Hello World!', document.getElementById('root'))
</script>
<div id="root"></div>
<! -- Directly point to the local path -->
<script type="module" src="/src/main.jsx"></script>

Loading Non-JS File Resources

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
Import'./index.css'// Import the CSS file.
import App from '. /App' //Import the JSX file.
// Use the JSX syntax.
ReactDOM.render(<App />, document.getElementById('root'))

Implementing HotModuleReplace

Optimizing Slow Page Loading Due to a Large Number of Requests

4. Practices in the Supply Chain POS Scenario

Debug a Single File without SourceMap

Problems in the Implementation Process and Solutions

Some Modules Are Packaged without the ESModule

Coding of the Less Dependency on node_modules

@import '~@ali/pos-style-mixin/style/lst.less'; 
//~ Supported only in the webpack less-loader, not in the native Less plug-in
// Uniformly migrate to the following mode.
@import '@ali/pos-style-mixin/style/lst.less';
//Configure lessOptions for final packaging in the original webpack less-loader.
/*
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
paths: [path.resolve(cwd, 'node_modules')],
}
}
}
*/

The Specification for JSX File Extensions

Processing of Babel-Runtime

5. Feasibility of Using the Bundleless Mode for Deployment

6. Summary

Original Source:

--

--

--

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Carousel With CSS & Javascript

How to Use Node.js to Upload Files to Alibaba Cloud Object Storage

Authentication with AccountsJS & GraphQL Modules

[Leetcode] Next Permutation

Can console.log() cause memory leaks? How to make a browser crash with console.log()?

Fixing your NPM installation

React-Redux Hooks: useSelector and useDispatch

How to fetch data from firebase through seversiderendering Next Js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com

More from Medium

Unique Identifiers: UUID vs NanoID

UUID vs NanoID

How real-world web-based applications and software are built

OnlySwitch

AppIcon

Block Coding: Truth & Misconceptions