Tách mã là một trong những tính năng hấp dẫn nhất của webpack. Tính năng này cho phép bạn chia mã của mình thành nhiều gói khác nhau, sau đó có thể được tải theo yêu cầu hoặc song song. Nó có thể được sử dụng để đạt được các gói nhỏ hơn và kiểm soát mức độ ưu tiên tải tài nguyên, nếu được sử dụng đúng cách, có thể có tác động lớn đến thời gian tải
Có ba cách tiếp cận chung để tách mã có sẵn
- các điểm nhập cảnh. Tách mã thủ công bằng cách sử dụng cấu hình
5import _ from 'lodash'; console.log[_.join[['Another', 'module', 'loaded!'], ' ']]; - Ngăn chặn trùng lặp. Sử dụng hoặc
6 để loại bỏ và tách khốiimport _ from 'lodash'; console.log[_.join[['Another', 'module', 'loaded!'], ' ']]; - Nhập động. Tách mã thông qua các lệnh gọi hàm nội tuyến trong các mô-đun
các điểm nhập cảnh
Đây là cách dễ nhất và trực quan nhất để tách mã. Tuy nhiên, nó thủ công hơn và có một số cạm bẫy, chúng ta sẽ xem qua. Hãy xem cách chúng ta có thể tách một mô-đun khác khỏi gói chính
dự định
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- another-module.js
|- /node_modulesmô-đun khác. js
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];gói web. cấu hình. js
const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};Điều này sẽ mang lại kết quả xây dựng sau
...
[webpack-cli] Compilation finished
asset index.bundle.js 553 KiB [emitted] [name: index]
asset another.bundle.js 553 KiB [emitted] [name: another]
runtime modules 2.49 KiB 12 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./src/another-module.js 84 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 245 msNhư đã đề cập, có một số cạm bẫy đối với phương pháp này
- Nếu có bất kỳ mô-đun trùng lặp nào giữa các khối mục nhập, chúng sẽ được bao gồm trong cả hai gói
- Nó không linh hoạt và không thể được sử dụng để phân tách động mã với logic ứng dụng cốt lõi
Điểm đầu tiên trong hai điểm này chắc chắn là một vấn đề đối với ví dụ của chúng tôi, vì
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];phụ thuộc đầu vào
Cho phép chia sẻ các mô-đun giữa các khối
gói web. cấu hình. js
ngày thứ 8Nếu chúng tôi định sử dụng nhiều điểm vào trên một trang HTML, thì cũng cần có ____ ______, nếu không chúng tôi có thể gặp rắc rối được mô tả tại đây
gói web. cấu hình. js
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Và đây là kết quả của việc xây dựng
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Như bạn có thể thấy, có một tệp
const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};Mặc dù cho phép sử dụng nhiều điểm nhập trên mỗi trang trong webpack, nhưng nên tránh sử dụng khi có thể để ưu tiên một điểm nhập có nhiều lần nhập.
const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};SplitChunksPlugin
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];gói web. cấu hình. js
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- another-module.js
|- /node_modulesVới tùy chọn cấu hình tại chỗ, bây giờ chúng ta sẽ thấy phần phụ thuộc trùng lặp đã bị xóa khỏi
const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];...
[webpack-cli] Compilation finished
asset index.bundle.js 553 KiB [emitted] [name: index]
asset another.bundle.js 553 KiB [emitted] [name: another]
runtime modules 2.49 KiB 12 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./src/another-module.js 84 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 245 mswebpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- another-module.js
|- /node_modulesDưới đây là một số plugin và trình tải hữu ích khác do cộng đồng cung cấp để tách mã
Nhập động
Hai kỹ thuật tương tự được webpack hỗ trợ khi phân tách mã động. Cách tiếp cận đầu tiên và được đề xuất là sử dụng phương pháp phù hợp với đề xuất ECMAScript để nhập động. Cách tiếp cận kế thừa dành riêng cho webpack là sử dụng. Hãy thử sử dụng cách đầu tiên trong hai cách tiếp cận này
Trước khi chúng tôi bắt đầu, hãy loại bỏ thêm
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']]; const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};gói web. cấu hình. js
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- another-module.js
|- /node_modulesChúng tôi cũng sẽ cập nhật dự án của mình để xóa các tệp hiện không sử dụng
dự định
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Bây giờ, thay vì nhập tĩnh
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];src/chỉ mục. js
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Lý do chúng tôi cần
...
[webpack-cli] Compilation finished
asset index.bundle.js 553 KiB [emitted] [name: index]
asset another.bundle.js 553 KiB [emitted] [name: another]
runtime modules 2.49 KiB 12 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./src/another-module.js 84 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 245 ms const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};Hãy chạy webpack để xem
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Khi
...
[webpack-cli] Compilation finished
asset index.bundle.js 553 KiB [emitted] [name: index]
asset another.bundle.js 553 KiB [emitted] [name: another]
runtime modules 2.49 KiB 12 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./src/another-module.js 84 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 245 ms const path = require['path'];
module.exports = {
- entry: './src/index.js',
+ mode: 'development',
+ entry: {
+ index: './src/index.js',
+ another: './src/another-module.js',
+ },
output: {
- filename: 'main.js',
+ filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};src/chỉ mục. js
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Tìm nạp trước/Tải trước mô-đun
Gói web 4. 6. 0+ thêm hỗ trợ cho tìm nạp trước và tải trước
Sử dụng các lệnh nội tuyến này trong khi khai báo quá trình nhập của bạn cho phép gói web xuất ra “Gợi ý tài nguyên” cho trình duyệt biết rằng đối với
- tìm nạp trước. tài nguyên có lẽ là cần thiết cho một số điều hướng trong tương lai
- tải trước. tài nguyên cũng sẽ cần thiết trong quá trình điều hướng hiện tại
Một ví dụ về điều này là có thành phần
const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};nút đăng nhập. js
Điều này sẽ dẫn đến việc
const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
}; const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};Chỉ thị tải trước có nhiều điểm khác biệt so với tìm nạp trước
- Một đoạn được tải trước bắt đầu tải song song với đoạn gốc. Đoạn tìm nạp trước bắt đầu sau khi đoạn gốc tải xong
- Một đoạn được tải trước có mức độ ưu tiên trung bình và được tải xuống ngay lập tức. Một đoạn tìm nạp trước được tải xuống trong khi trình duyệt không hoạt động
- Một đoạn được tải trước phải được yêu cầu ngay lập tức bởi đoạn gốc. Một đoạn tìm nạp trước có thể được sử dụng bất cứ lúc nào trong tương lai
- Hỗ trợ trình duyệt là khác nhau
Một ví dụ về điều này có thể là có một
const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};Hãy tưởng tượng một thành phần
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Thành phần biểu đồ. js
Khi một trang sử dụng
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']]; const path = require['path'];
module.exports = {
mode: 'development',
entry: {
- index: './src/index.js',
- another: './src/another-module.js',
+ index: {
+ import: './src/index.js',
+ dependOn: 'shared',
+ },
+ another: {
+ import: './src/another-module.js',
+ dependOn: 'shared',
+ },
+ shared: 'lodash',
},
output: {
filename: '[name].bundle.js',
path: path.resolve[__dirname, 'dist'],
},
};import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Đôi khi bạn cần có quyền kiểm soát tải trước của riêng mình. Ví dụ: tải trước bất kỳ quá trình nhập động nào có thể được thực hiện thông qua tập lệnh async. Điều này có thể hữu ích trong trường hợp kết xuất phía máy chủ phát trực tuyến
Nếu quá trình tải tập lệnh không thành công trước khi webpack bắt đầu tự tải tập lệnh đó [webpack chỉ tạo thẻ tập lệnh để tải mã của nó, nếu tập lệnh đó không có trên trang], trình xử lý bắt đó sẽ không bắt đầu cho đến khi không được thông qua. Hành vi này có thể bất ngờ. Nhưng điều đó có thể giải thích được - webpack không thể đưa ra bất kỳ lỗi nào, vì webpack không biết, tập lệnh đó không thành công. Webpack sẽ thêm trình xử lý lỗi vào tập lệnh ngay sau khi xảy ra lỗi
Để ngăn chặn sự cố như vậy, bạn có thể thêm trình xử lý onerror của riêng mình, trình xử lý này sẽ xóa tập lệnh trong trường hợp có bất kỳ lỗi nào
import _ from 'lodash';
console.log[_.join[['Another', 'module', 'loaded!'], ' ']];Trong trường hợp đó, tập lệnh bị lỗi sẽ bị xóa. Webpack sẽ tạo tập lệnh riêng và mọi lỗi sẽ được xử lý mà không có bất kỳ thời gian chờ nào
Phân tích gói
Khi bạn bắt đầu tách mã của mình, có thể hữu ích khi phân tích đầu ra để kiểm tra xem các mô-đun đã kết thúc ở đâu. Công cụ phân tích chính thức là một nơi tốt để bắt đầu. Ngoài ra còn có một số tùy chọn khác được cộng đồng hỗ trợ
- biểu đồ webpack. Biểu đồ hình tròn tương tác cho số liệu thống kê webpack
- trình hiển thị webpack. Trực quan hóa và phân tích các gói của bạn để xem mô-đun nào đang chiếm dung lượng và mô-đun nào có thể trùng lặp
- trình phân tích gói webpack. Tiện ích plugin và CLI đại diện cho nội dung gói dưới dạng sơ đồ cây có thể thu phóng tương tác thuận tiện
- trình trợ giúp tối ưu hóa gói gói web. Công cụ này sẽ phân tích gói của bạn và cung cấp cho bạn các đề xuất khả thi về những điều cần cải thiện để giảm kích thước gói của bạn
- thống kê bó. Tạo báo cáo gói [kích thước gói, nội dung, mô-đun] và so sánh kết quả giữa các bản dựng khác nhau
bước tiếp theo
Xem Lazy Loading để biết ví dụ cụ thể hơn về cách sử dụng
...
[webpack-cli] Compilation finished
asset index.bundle.js 553 KiB [emitted] [name: index]
asset another.bundle.js 553 KiB [emitted] [name: another]
runtime modules 2.49 KiB 12 modules
cacheable modules 530 KiB
./src/index.js 257 bytes [built] [code generated]
./src/another-module.js 84 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 245 ms