Bạn đang gặp vấn đề với tốc độ tải trang chậm chạp trên Magento 2 do có quá nhiều file JavaScript không cần thiết? Bài viết này sẽ cung cấp cho bạn các giải pháp hiệu quả để gỡ bỏ các file JS thừa, giúp cải thiện đáng kể hiệu suất website của bạn. Chúng ta sẽ cùng tìm hiểu cách loại bỏ các file JS thông qua cấu hình XML và RequireJS.
Trong quá trình phát triển website Magento 2, việc tích lũy các file JavaScript không sử dụng là điều khó tránh khỏi. Những file này, dù nhỏ, có thể gây ảnh hưởng lớn đến tốc độ tải trang, đặc biệt đối với người dùng di động hoặc kết nối internet chậm. Hậu quả là trải nghiệm người dùng kém, tỷ lệ thoát trang cao và ảnh hưởng tiêu cực đến thứ hạng SEO.
Một số lý do chính khiến việc loại bỏ file JS thừa trở nên cần thiết:
Một phương pháp hiệu quả là tạo file `requirejs-config.js` trong theme hoặc module của bạn và override đường dẫn của các file JS không mong muốn bằng một file JS trống. Điều này sẽ ngăn Magento tải các file JS gốc.
Ví dụ, để loại bỏ file `datepicker.js`, bạn có thể tạo file `requirejs-config.js` với nội dung sau:
var config = {
map: {
'*': {
'datepicker': 'Your_Module/js/empty'
}
}
};
Trong đó, `Your_Module/js/empty` là một file JS trống bạn tự tạo.
Magento 2 kết hợp tất cả các file `requirejs-config.js` từ các module và themes. Đôi khi, bạn muốn loại bỏ một file `requirejs-config.js` cụ thể từ parent theme. Để làm điều này, bạn có thể sử dụng một plugin.
Đầu tiên, tạo file `di.xml` trong module của bạn (ví dụ: `etc/frontend/di.xml`):
Sau đó, tạo plugin:
namespace YourVendor\YourModule\Plugin\Magento\Framework\RequireJs\Config\File\Collector;
use Magento\Framework\RequireJs\Config\File\Collector\Aggregated;
use Magento\Framework\View\Design\ThemeInterface;
use Magento\Framework\Component\ComponentRegistrar;
class AggregatedPlugin
{
/**
* @param ComponentRegistrar $componentRegistrar
*/
public function __construct(ComponentRegistrar $componentRegistrar)
{
$this->componentRegistrar = $componentRegistrar;
}
/**
* Remove files that have been extended in the custom theme
*
* @param Aggregated $subject
* @param array $files
* @return array
*/
public function aroundGetFiles(
Aggregated $subject,
\Closure $callback,
ThemeInterface $theme,
$filePath
) {
$customTheme = '/' . $theme->getThemePath() . '/';
if ($parentTheme = $theme->getParentTheme()) {
$parentThemePath = $this->componentRegistrar->getPath(
ComponentRegistrar::THEME, $parentTheme->getFullPath()
);
if (strpos($parentThemePath, '/vendor/magento/') !== false) {
$parentTheme = '/' . basename($parentThemePath) . '/';
}
}
$files = $callback($theme, $filePath);
if (!empty($customTheme) && !empty($parentTheme)) {
foreach ($files as $key => $file) {
if (($pos = strpos($file->getFileName(), $parentTheme)) !== false) {
$relativeFileName = substr($file->getFileName(), $pos+strlen($parentTheme));
foreach ($files as $findFile) {
if (strpos($findFile->getFileName(), $customTheme . $relativeFileName) !== false) {
unset($files[$key]);
break;
}
}
}
}
}
return $files;
}
}
Plugin này sẽ loại bỏ các file `requirejs-config.js` từ parent theme nếu chúng đã được override trong theme hiện tại.
Việc tối ưu hóa tốc độ website Magento 2 là một quá trình liên tục. Bằng cách loại bỏ các file JS thừa và áp dụng các phương pháp tối ưu khác, bạn có thể cải thiện đáng kể trải nghiệm người dùng và thứ hạng SEO của mình. Chúc bạn thành công!
Bài viết liên quan