droplet-plugin
v1.1.0
Published
Builds .liquid versions of your JS files with the public path defined so you can use dynamic imports in Shopify
Downloads
11
Readme
Webpack Droplet Plugin
This plugin + loader allows dynamic code splitting on Shopify by using Liquid syntax features to determine the public asset path for a site.
Install with npm i -D droplet-plugin
.
Usage
Use as a plugin in a Shopify Webpack config, but only for deployed files - this will not work for local development.
plugins:
process.env.NODE_ENV === "production" ? [new DropletPlugin()] : [],
This does not allow dynamic imports on its own, simply a method for Webpack to be able to find split files at runtime.
Use a module such as babel-plugin-syntax-dynamic-import
to enable dynamic imports.
Gotchas
Please note Shopify won't let you upload files with a ~
in the file name, which is Webpack's default delimiter for combined chunks. You will probably need to edit this in your Slate / Webpack config using a config something like this (important point being automaticNameDelimiter
):
optimization: {
splitChunks: {
chunks: "async",
minSize: 15000,
maxSize: 0,
minChunks: 1,
automaticNameDelimiter: "@",
name: true
}
}