Symfony webpack 使用数据表将巨大的 JS 文件安可

Question

我不知道如何优化由 webpack 编译的.js文件的大小 通过 webpack-encore on a symfony project 4

以下是我的布局资产/JS/app.js的JS：

require('../css/app.css');
require('bootstrap/js/dist/index.js');

我的页面 assets/js/datatables.js 的 JS：

require('../css/datatables.css');
require('datatables.net-bs4/js/dataTables.bootstrap4.js');
global.$ = $;

和 webpack 配置文件 webpack.config.js：

const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/app', './assets/js/app.js')
.addEntry('js/datatables', './assets/js/datatables.js')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableSassLoader()
.autoProvidejQuery()
;
module.exports = Encore.getWebpackConfig();

请注意数据表的大小.js文件....

$ ls -lah public/build/js/
total 3.2M
drwxr-xr-x 3 dev dev 4.0K Aug 16 12:52 .
drwxr-xr-x 5 dev dev 4.0K Aug 16 12:52 ..
-rw-r--r-- 1 dev dev 470K Aug 16 12:52 app.css
-rw-r--r-- 1 dev dev 740K Aug 16 12:52 app.js
-rw-r--r-- 1 dev dev  14K Aug 16 12:52 datatables.css
-rw-r--r-- 1 dev dev 2.0M Aug 16 12:52 datatables.js
drwxr-xr-x 2 dev dev 4.0K Aug 16 12:52 default

2.0M ：这对于数据表来说似乎有些过分

Answer 1

结束此讨论： 确实，针对生产环境进行编译可以大大减少文件的大小。 这是另一种解决方案，使用共享条目：

const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.createSharedEntry('js/app', './assets/js/app.js')
.addEntry('js/datatables', './assets/js/datatables.js')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableSassLoader()
.autoProvidejQuery();
const config = Encore.getWebpackConfig();
delete config.stats;
module.exports = config;