Closed quantix-studio closed 7 years ago
Well, currently it's not so easy to use, but for this moment it's possible in this way:
webpack.config.js
to use the plugin, for example new CommonsChunkPlugin('commons.[hash].js')
(use hash in the filename to have cache busting)getAssetUrl
of maba_webpack.asset_manager
service with given name - in this example 'commons.[hash].js'
. Using twig function is not really an option as asset collector will think that it's entry point and not just generated asset.I plan to look how to provide better support for it.
What is your use-case? Do you want to have single commons file or separate ones ("multiple common chunks", as they call it in documentation)?
One possible way would be to integrate "groups" of scripts inside twig tags. Something like this:
{% webpack_stylesheets group=admin '@ApplicationBundle/Resources/assets/admin1.js' %}
<script src="{{ asset_url }}"></script>
{% end_webpack_stylesheets %}
Somewhere else:
{% webpack_stylesheets group=admin '@ApplicationBundle/Resources/assets/admin2.js' %}
<script src="{{ asset_url }}"></script>
{% end_webpack_stylesheets %}
This would collect assets in each group, add commons chunk plugin for each group and include that common chunk in each of those tags.
In another hand, would this really be necessary/used? It would not work nicely with function, too (no way to add additional javascript file here). It's not really clear, how it could be used if loaded asynchronously, too.
Maybe some semi-manual approach would be better? For example, just a twig function for easier common chunks integration and some documentation on how to configure everything correctly.
use
getAssetUrl
ofmaba_webpack.asset_manager
service with given name - in this example'commons.[hash].js'
.
This does not work for me. (Disclaimer: i'm using webpack2, but the same issue should apply to webpack1 too.)
The problem is that getAssetUrl uses AssetNameGenerator which always adds an sha1 hash before looking up the real asset path in webpack_manifest.
But the commons.[hash].js entry in the manifest doesn't have the sha1 hash part causing the following error:
[2016-11-29 11:08:34] request.CRITICAL: Uncaught PHP Exception Twig_Error_Runtime: "An exception has been thrown during the rendering of a template ("No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background?") in "xWebAppBundle::base.html.twig" at line 35." at /var/www/website/app/cache/prod/classes.php line 1300 {"exception":"[object] (Twig_Error_Runtime(code: 0): An exception has been thrown during the rendering of a template (\"No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background?\") in \"xxx::base.html.twig\" at line 35. at /var/www/website/app/cache/prod/classes.php:1300, RuntimeException(code: 0): No information in manifest for commons.[hash].js (key commons.[hash]-d8680d7994b61d397a23f6bd7b2586dcab998c1e). Is maba:webpack:dev-server running in the background? at /var/www/website/vendor/maba/webpack-bundle/src/Service/AssetManager.php:47)"} []
base.html.twig line 35:
<script type="application/javascript" src="{{ webpack_asset_manager.getAssetUrl('commons.[hash].js') }}"></script>
compile call:
/var/www/website$ app/console maba:webpack:compile --env=prod
Hash: 6a04f2dd62b14516bda2
Version: webpack 2.1.0-beta.27
Time: 4828ms
Asset Size Chunks Chunk Names
x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9.160f42133c85ba239f38.js 27.1 kB 0 [emitted] x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9
y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7.ac9dbb380ed05f1ead85.js 1.24 kB 1 [emitted] y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7
z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7.70cababb905935614dd6.js 695 bytes 2 [emitted] z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7
commons.6a04f2dd62b14516bda2.js 88.9 kB 3 [emitted] commons.[hash].js
webpack_manifest.php
<?php return array (
'x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9' =>
array (
'js' => '/compiled/x-dce1a19df7b7097c16ddb0eb8c769bb652b5f6d9.160f42133c85ba239f38.js',
),
'y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7' =>
array (
'js' => '/compiled/y-dbf69ebd5fa18de0f084e29c468d95208d89f1a7.ac9dbb380ed05f1ead85.js',
),
'z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7' =>
array (
'js' => '/compiled/z-b5dd8e1087aed9218121bf2b12e1d8e6d702a6a7.70cababb905935614dd6.js',
),
'commons.[hash].js' =>
array (
'js' => '/compiled/commons.6a04f2dd62b14516bda2.js',
),
);
CommonsChunk config
config.plugins = [
new ExtractTextPlugin({
filename: BUILD ? '[name].[hash].css' : '[name].bundle.css',
disable: !options.parameters.extract_css
}
),
new webpack.optimize.CommonsChunkPlugin({
name:'commons.[hash].js',
filename:'commons.[hash].js',
minChunks:2
}),
];
My usecase is a site with multiple routes that use a common base template with a customizable style, content and script blocks. Some routes require more than one different 3rd party library, while others don't require js at all, so having multiple common chunks available would be great. Using one big 'commons' chunk would still be better than no chunking at all.
I'm fine with manual inclusion of common chunks in templates and explicit chunk definition in webpack config. In fact I would greatly prefer that over an automatic approach that distributes the actual chunk configuration accross multiple twig files.
ps. changing generateName
in AssetNameGenerator
to return just the filename instead of filename-[sha1] seems to resolve my issue above.
pps. I'm not that familiar with symfony, but if generateName
is called in a twig function, wouldn't it calculate the sha1 on every client request that uses the template, causing additional cpu load and increased response times?
Hi,
I'm successfully using your bundle, except for commonsChunkPlugin. How do you call generated chunks from twigs ?